BUG: Modals close on mouseup event outside of modal rather than a full click

[derikb]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 143.0.7499.169

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

1. Drag a custom code component into the page.
2. The modal should open automatically, else double click the custom code component in the preview.
3. Click and hold inside the modal then drag your mouse outside the modal and release the click.
4. The modal closes.

What is the expected behavior?
Seems to me the modal should only close on a full click event outside the modal.

What is the current behavior?
The modal seems to be closing on just a mouseup event.

I took a look in the modal files and don't see a quick answer of why this is happening. The modal events all seems to be 'click' events... or at least they are labelled as such.

Code of Conduct

• I agree to follow this project's Code of Conduct

[derikb]

fwiw I used the demo page as the reproducible link, though that page is not using the most recent version of grapesjs. My local code is using the recent version and shows the same issue.

[derikb]

Ok I see why its happening. Because the modal and its surrounding backdrop are all one element that has the events attached, so a mousedown, drag, mouseup is still getting treated as a click cause its all over the same element. Event.target ends up being where the click ended up (outside the modal body) and that passes the test in ModalView.onClick so the modal closes.

Compare with Bootstrap's modals. They add their backdrop as a separate element from the modal body, placed just behind it via z-index. That way any clicks on the modal body itself don't pick up the events on the backdrop element and you can test for Event.currentTarget === the backdrop element when handling events