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
UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors
Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill
Tutorial
Claude Skill for GrapesJS: How AI Is Changing the Way We Build Visual Editors
We've released the Claude Skill for GrapesJS Development โ a free, open-source skill that turns Claude into a developer who actually knows GrapesJS
Tutorial
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps โ a beginner-friendly 2026 comparison
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.