Only close modal if directly clicking on backdrop #3884
Conversation
|
Only deals with the old modals at the moment, which is fine, since the issue is with the profile edit modal. Let me see if there's a good way of doing this with the new modals, I think the right path might just be to expose a private API over the modal context |
src/view/com/modals/Modal.web.tsx
Outdated
| const onPressMask = (ev: React.MouseEvent<HTMLDivElement>) => { | ||
| // 1. Ignore clicks from inside the modal | ||
| // 2. Ignore clicks that started inside the modal and ended in the mask | ||
| if (ev.target !== ev.currentTarget.firstChild || clickInsideRef.current) { |
There was a problem hiding this comment.
Any solution that relies on timing here (like with tracking pointer down/up) seems suspicious to me. For this type of problem it's usually sufficient to check whether one node contains the other node.
What is special that requires this?
There was a problem hiding this comment.
Yeah this doesn't seem the right approach I think, now that I've tested it again this actually swallows clicks to backdrop if I attempt to do the second case.
There was a problem hiding this comment.
Hm, it seems that Headless UI does more or less the same thing to check where the click initially started. Perhaps it might be worthwhile to copy this hook over.
The problem this PR tries to fix can be illustrated here:
2024-05-07.09-18-56.mp4
It's very easy to overshoot the mouse cursor when selecting text, and while a confirmation modal would've removed accidentally losing your changes, it doesn't really remove the annoyance issue that overshooting causes.
I believe it might be partly why the composer doesn't do backdrop clicks?
Fixes #1894
Fixes #3834
This seemed to work for checking where the click/press initially started from, we don't want any clicks that initially started from the modal to be handled by the backdrop (which closes the modal)