Modal closes after mouse moving to overlay
asyncink opened this issue · comments
Bug report
Modal window from component closes after mouse moving to overlay
Describe the bug
If user starts the click inside the modal content and moves the pointer outside the content area to the overlay area, then it behaves like the click was fired on the overlay area and the modal window closes.
To Reproduce
- Go to https://ui.supabase.com/components/modal
- Click on 'Open Modal'
- Press mouse button inside the content area of the modal, move pointer outside to the overlay and release the mouse button
- Modal closes
Expected behavior
Modal window should not close if the mouse pointer movement starts inside the content area. Typically that is done with the check of target event nodes
I think this is because the docs are out of date, the newer Modal probably doesn't behave like this.
Will investigate though 👍
I don't think it's a bug though. Since, the behavior, I assume, is not normal. You have to keep holding the mouse clicked from inside the modal and move the mouse out of the modal and leave the mouse to trigger the modal close. It's expected.
I don't think it's a bug though. Since, the behavior, I assume, is not normal. You have to keep holding the mouse clicked from inside the modal and move the mouse out of the modal and leave the mouse to trigger the modal close. It's expected.
that is not true, you can try to place an input inside modal, then type something inside input and try to select everything in the input with mouse. you will unexpectedly close the modal (and lose modal state and typed text in other inputs, for example) many times, it is quite often bug in many realizations of modal windows.
I'm just looking at this now. It looks like it was a mistake.
I agree with @asyncink with this, it also seems to be the default behaviour of Radix dialog which is probably a good behaviour to follow.
just looking at what might be causing it. might be a rogue onClick somewhere
I'm just looking at this now. It looks like it was a mistake.
I agree with @asyncink with this, it also seems to be the default behaviour of Radix dialog which is probably a good behaviour to follow.
just looking at what might be causing it. might be a rogue onClick somewhere
typically such wrong behavior is caused by click outside logic - we want our modal to close when user clicks outside the modal. but, when user starts the click inside the modal and moves the cursor outside, it is similar to outside click despite the starting point. basically we need to check the event target node in the onClick handler - and close the modal only if target node is inside the modal (click event target node is the node of the end point, not the starting point). I hope I was able to explain - I look through the code and there is some specific logic for outside clicks, that's why I have started the issue and not pull request with fixes.
Supabase UI is being deprecated.
As part of that, we are closing issues in this repo that are perhaps outdated.
If you'd like to still make an issue, you could consider making an issue for our package in our monorepo https://github.com/supabase/supabase/tree/master/packages/ui
We are moving the components to the main mono repo at https://github.com/supabase/supabase.
The auth component has been moved to it's own repo and package. https://github.com/supabase-community/auth-ui. You can also read the docs for auth ui here.