GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
20.78k stars 3.9k forks source link

BUG: Cannot be selected on canvas if tags are nested #5989

Closed ihatov08 closed 2 weeks ago

ihatov08 commented 2 weeks ago

GrapesJS version

What browser are you using?

Chrome 126.0.6478.127(Windows)

Reproducible demo link

https://jsfiddle.net/vbu18q5f/2/

Describe the bug

How to reproduce the bug?

  1. Cannot be selected on canvas if tags are nested Section 2 block in demolink has a div tag inside the section tag. section 2 block cannot make section tag selected in canvas, div tag becomes selected. This creates two problems.
    • The div tag is selected, so when you try to delete the block on the canvas, Only the div tag will be deleted, and the section tag will remain. You can't delete all elements of block from canvas, so to delete all elements of block you have to delete it from layer manager

https://github.com/GrapesJS/grapesjs/assets/14024165/e0eceae0-2f92-490c-9164-12d13328a750

Perhaps if the nested elements have the same size, only child elements can be clicked

https://github.com/GrapesJS/grapesjs/assets/14024165/91997107-603a-4677-98c0-3e972fd34296

What is the expected behavior?

What is the current behavior?

Code of Conduct

artf commented 2 weeks ago

This is not a bug but more of a UX issue related to how in general HTML works, that's also the exact reason why we provide "select parent" button in the toolbar.

Don't expect the framework to fix all the problems for you, It's up to the developer to provide a user-friendly interface and better UX, there are a lot of component properties that could help.

ihatov08 commented 2 weeks ago

@artf

Sorry, frameworks don't solve everything as you say. I'll make sure to read the documentation properly from now on. Thank you for your reply.