Issue #5334๐Ÿ’ฌ AnsweredOpened Aug 24, 2023by DreamCloudProject1 reactions

Selection of custom component type not working in the canvas

Quick answerby DreamCloudProjectโค 1

@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)

DreamCloudProjectโ€ข Sep 3, 2023

@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...

yatoogamiiโ€ข Aug 25, 2023

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 ?

GJS Helperโ€ข May 17, 2026

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins โ†’
Premium option

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.

All tutorials โ†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.