Dragging onto underlay closes modal
See original GitHub issueI put a breakpoint in checkUnderlayClick
and I understand why it acts the way it does, but it caught me by surprise the first time my modal disappeared because I was dragging my mouse around inside it. I’m not sure if this is an intended behavior or not, so feel free to educate me if it is 😃
This behavior can be reproduced in Chrome & Safari on the demo modals configured to close on underlay clicks. Simply click within the modal contents, and drag the mouse out of the modal and onto the underlay.
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Dragging outside of the modal closes the modal #131 - GitHub
I have a modal with some text in it. When I select the text and accidentally move my mouse outside the dialog, releasing...
Read more >Dragging out of modal causes it to close on mouse release in ...
When a user highlights input text within a modal and accidentally moves the mouse outside of the modal the modal will close.
Read more >Bootstrap modal z-index - Stack Overflow
On non-modal pages, my underlay was z-index:-1 , but in modal situations, it actually placed it under the modal. I think this is...
Read more >useModalOverlay – React Aria - React Spectrum Libraries
The modal optionally closes when interacting outside, or pressing the Escape key. Focus management – Focus is moved into the modal on mount,...
Read more >Bug: Dragging outside preview image modal closes modal
The modal closes when a mouse interaction happens outside of the modal area. Apparently this behavior is bound to mouseup instead of click....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Huh, I’m glad I’m wrong! I tried this out on my own iPhone and bunch of mobile browsers with Browserstack — and found no problems.
onMouseDown
seems to work 🌮I am having a hard time time finding any documented explanation of this — like, does no
mousedown
event fire if you touch-drag, only if you tap? I would love to read about why this works. But in the meanwhile I think I’ve checked in a sufficient number of browsers that I’m about as confident it will work ok as the other strategy — so let’s release it.Thanks @mjlangan. I’ll try to get out a release tonight.