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.

Sign up for GitHub

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

Jump to bottom

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

Commits on Jul 25, 2022

  1. ensure outside click works on Safari in iOS 

    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`...
    @RobinMalfait
    RobinMalfait committed Jul 25, 2022
    Configuration menu
    Copy the full SHA
    1d12aec View commit details
    Browse the repository at this point in the history

  2. update Dialog example to use DialogPanel

    @RobinMalfait
    RobinMalfait committed Jul 25, 2022
    Configuration menu
    Copy the full SHA
    f95b80c View commit details
    Browse the repository at this point in the history

  3. update changelog

    @RobinMalfait
    RobinMalfait committed Jul 25, 2022
    Configuration menu
    Copy the full SHA
    8b8f45b View commit details
    Browse the repository at this point in the history