BUG: Selection of custom component type not working in the canvas
Question
GrapesJS version
- 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, 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 from the canvas instead of opening the layer manager every time.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
@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 the element selection logic in the editor works. The problem seems to be solved. Thank you!
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 ?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4083
BUG: Set root does not work
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Safari 15.0Reproducible demo link https://js...
Issue #6458
BUG: sector.setName doesn't work
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...
Issue #4015
BUG: Drag and drop not working well in case of RTL
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link https://...
Issue #6143
BUG/[QUESTION]: How to correctly wrap a Component on add/mount?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v128 Reproducible demo link https:/...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.