BUG: Modals close on mouseup event outside of modal rather than a full click
Question
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?
- Drag a custom code component into the page.
- The modal should open automatically, else double click the custom code component in the preview.
- Click and hold inside the modal then drag your mouse outside the modal and release the click.
- 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
Answers (2)
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.
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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6685
BUG: Custom component styles are not applied after deletion and re-addition
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo l...
Issue #6152
BUG: CSS added via custom code persists after custom code component is removed
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...
Issue #4257
BUG: Background modification doesn't work for non-images
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v100 Reproducible demo link https:/...
Issue #4376
BUG: Unselected custom component will also listen to event 'styleable:change'
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome 100 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.