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.
Read full answer below โQuestion
GrapesJS version [x] 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 curren...
Answers (3)
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...
The issue you've described is a known edge case in how browser click events interact with mousedown and mouseup events, especially when dealing with overlays or backdrops for modals. While GrapesJS's modal closing logic is tied to a click event on its root element (which acts as the backdrop), the...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6152
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 #5584
"storage:end:load" event is not triggered when all components are mounted into the canvas
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v91 Reproducible demo link https://...
Issue #5378
Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas') while dragging a component in Layer Manager Panel
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo li...
Issue #3948
My Options ( in traits ) for select component gets resetted every time after each reload of page
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โ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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins โ TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.