question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dragging onto underlay closes modal

See original GitHub issue

I 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:closed
  • Created 5 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
davidtheclarkcommented, Jul 28, 2018

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.

0reactions
davidtheclarkcommented, Jul 31, 2018

Thanks @mjlangan. I’ll try to get out a release tonight.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found