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

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

Thanks for reporting this, @derikb.

Great question about Modals close on mouseup event outside of modal rather than a full click. The recommended approach with Components is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!