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

Improve outside click on Safari iOS #1712

Merged
merged 3 commits into from
Jul 26, 2022
Merged

Improve outside click on Safari iOS #1712

merged 3 commits into from
Jul 26, 2022

Conversation

RobinMalfait
Copy link
Member

This PR fixes an issue where the outside click wasn't working properly for Safari on iOS when using
the Vue version of Headless UI

Fixes: #1707

When tapping on an element that is not clickable (like a div), then the
`click` and `mousedown` events will not reach the
`window.addEventListener('click')` listeners.

The only event that does that could be interesting for us is the
`pointerdown` event. The issue with this one is that we then run into
the big issue we ran in a few months ago where clicks on a scrollbar
*also* fired while a click doesn't.

This issue was not an issue in React land, the
`window.addEventListener('click')` was fired even when tapping on a
`div`. This was very very confusing, but we think this is because of the
syntethic event system, where the event listener is added to the root of
your application (E.g.: #app) and React manually bubbles the events.
Because this is done manually, it *does* reach the window as well.

The confusing part is, how does React convert a `pointerdown` event to a
`mousedown` and `click`. There is no code for that in their codebase?

Turns out they don't, and turns out the events **do** bubble, but up
until the `document`, not the `window`. But since they are manually
bubbling events it all makes sense.

So the solution? Let's switch from `window` to `document`...
@vercel
Copy link

vercel bot commented Jul 25, 2022

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

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Jul 25, 2022 at 9:25PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Jul 25, 2022 at 9:25PM (UTC)

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.

Click Outside broken on iOS
1 participant