Selection of custom component type not working in the canvas
@artf Yes, you're right. I'm blocking the click propagation, and so the editor doesn't receive the click event, hence can't execute the logic to select the element. I tried setting the click propagation only on the current element by replacing e.stopPropagation() with e.preventDefault() inside the component, and now t...
Read full answer below โQuestion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome, Opera, Edge, etc Reproducible demo link https://jsfiddle.net/crszh0jo/6/ Describe the bug I'm trying to make it work the same case as it described here [[QUESTION] Selection of custom components not possible from canvas #951](https://github.com/GrapesJS/grapesjs/issues/951), but no luck. How can I make selection from canvas work the same way as selection from layer manager? Because the solution described here does not work for my case. I need to allow the user to select a custom component...
Answers (4)
@artf Yes, you're right. I'm blocking the click propagation, and so the editor doesn't receive the click event, hence can't execute the logic to select the element. I tried setting the click propagation only on the current element by replacing e.stopPropagation() with e.preventDefault() inside the...
https://github.com/GrapesJS/grapesjs/assets/7961936/12180b41-4c29-489d-9bcd-1ea025a96a8f
This example shows how it works in my editor.
Hi @DreamCloudProject , it seems like your component Msc-header is locked. it's an attribute which allow the component to be clicked from the layers but not from the canva itself
Can you share or verify your component definition and check if the "locked" attributes is set to true ?
The issue you're experiencing with selecting your custom component directly from the GrapesJS canvas is a common one, stemming from how GrapesJS handles component selection and the default selectable property of nested elements. The solution from issue #951 might not have worked directly for your c...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4099
"Using draggableComponents: false" still drag (clone?) some elements if i try to edit text
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v96Reproducible demo link https://jsf...
Issue #5618
Old Component script is not deleted on Import. Resulting in duplicate scripts
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Edge v120.0.2210.121 Reproducible demo lin...
Issue #6086
Cannot read properties of undefined (reading 'lastComponent') & resizable feature not work
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Edge v128Reproducible demo linkshttps://code...
Issue #4754
Closing `</script>` tag not escaped for script properties
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 107.0.5304.122 (64-bit) Rep...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โPremium plugins ship with support, regular updates, and production-ready features โ save days of integration work.
Browse premium plugins โRelated tutorials
In-depth guides on the same topic.
Tutorial
Introducing Search on GJS.Market
GJS.Market now has one search across everything we publish โ plugins, articles, community questions, guides, authors and services. Press โK from any page.
Tutorial
GJS.Market Is Now Available for India ๐ฎ๐ณ
GJS.Market is expanding its global presence with a dedicated experience for developers, agencies, SaaS companies, and digital creators in India
Tutorial
How to Build an AI-Powered Page Builder with GrapesJS in 2026
What we learned building GJSDocs โ from simple AI text generation to structured, context-aware visual editing
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.