Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent default behaviour when clicking outside of a Dialog.Panel #2919

Merged
merged 2 commits into from
Jan 9, 2024

Conversation

RobinMalfait
Copy link
Member

When using a Dialog, we should prevent the default behaviour of the event that triggered the "close" in the useOutsideClick call.

We recently made improvements to improve outside click behaviour on touch devices (#2572) but due to the touchend event, the touch is still forwarded and therefore a potential button behind the "backdrop" will also be clicked. This is not what we want.

Added the event.preventDefault() for the Dialog specifically because there are other places where we use useOutsideClick and where we do want the behaviour where the click just continues. A concrete example of this is 2 Menu's next to eachother where you open the first one, and then click on the second one. This should close first one (outside click) and open the second one (by not preventing the event)

Fixes: #2884

When using a `Dialog`, we should prevent the default behaviour of the
event that triggered the "close" in the `useOutsideClick` call.

We recently made improvements to improve outside click behaviour on
touch devices (#2572) but
due to the `touchend` event, the touch is still forwarded and therefore
a potential button _behind_ the "backdrop" will also be clicked. This is
not what we want.

Added the `event.preventDefault()` for the Dialog specifically because
there are other places where we use `useOutsideClick` and where we _do_
want the behaviour where the click just continues. A concrete example of
this is 2 `Menu`'s next to eachother where you open the first one, and
then click on the second one. This should close first one (outside
click) and open the second one (by not preventing the event)
Copy link

vercel bot commented Jan 9, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 9, 2024 3:33pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 9, 2024 3:33pm

@RobinMalfait RobinMalfait merged commit aff438e into main Jan 9, 2024
8 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-2884 branch January 9, 2024 19:06
RobinMalfait added a commit that referenced this pull request Apr 15, 2024
…2919)

* use `event.preventDefault()` in the `useOutsideClick` on Dialog's

When using a `Dialog`, we should prevent the default behaviour of the
event that triggered the "close" in the `useOutsideClick` call.

We recently made improvements to improve outside click behaviour on
touch devices (#2572) but
due to the `touchend` event, the touch is still forwarded and therefore
a potential button _behind_ the "backdrop" will also be clicked. This is
not what we want.

Added the `event.preventDefault()` for the Dialog specifically because
there are other places where we use `useOutsideClick` and where we _do_
want the behaviour where the click just continues. A concrete example of
this is 2 `Menu`'s next to eachother where you open the first one, and
then click on the second one. This should close first one (outside
click) and open the second one (by not preventing the event)

* update changelog
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Events on mobile propagating through Dialog overlay (as suggested from docs)
1 participant