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 GJS.Market Services: ship your GrapesJS editor without the integration risk
It's everything that usually eats weeks of engineering time, scoped and priced up front. No open-ended hourly surprises.
Tutorial
GrapesJS custom components guide (2026)
Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.
Tutorial
Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK
Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.