Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: tailwindlabs/headlessui
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: @headlessui/react@v2.1.4
Choose a base ref
...
head repository: tailwindlabs/headlessui
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: @headlessui/react@v2.1.5
Choose a head ref
  • 2 commits
  • 6 files changed
  • 1 contributor

Commits on Sep 4, 2024

  1. Fix transition bug on Firefox, triggered by clicking the `PopoverButt… 

    …on` in rapid succession (#3452)

We recently landed a fix for `Popover`s not closing correctly when using
the `transition` prop (#3448). Once this fix was published, some users
still ran into issues using Firefox on Windows (see:
tailwindlabs/tailwindui-issues#1625).

One fun thing I discovered is that transitions somehow behave
differently based on where they are triggered from (?). What I mean by
this is that holding down the <kbd>space</kbd> key on the button does
properly open/close the `Popover`. But if you rapidly click the button,
the `Popover` will eventually get stuck.

> Note: when testing this, I made sure that the handling of the `space`
key (in a `keydown` handler) and the clicking of the mouse (handled in a
`click` handler) called the exact same code. It still happened.

The debugging continues…

One thing I noticed is that when the `Popover` gets stuck, it meant that
a transition didn't properly complete.

The current implementation of the internal `useTransition(…)` hook has
to wait for all the transitions to finish. This is done using a
`waitForTransition(…)` helper. This helper sets up some event listeners
(`transitionstart`, `transitionend`, …) and waits for them to fire.

This seems to be unreliable on Firefox for some unknown reason.

I knew the code for waiting for transitions wasn't ideal, so I wanted to
see if using the native `node.getAnimations()` simplifies this and makes
it work in general.

Lo and behold, it did! 🎉

This now has multiple benefits:

1. It works as expected on Firefox
2. The code is much much simpler
3. Uses native features

The `getAnimations(…)` function is supported in all modern browsers
(since 2020). At the time it was too early to rely on it, but right now
it should be safe to use.

Fixes: tailwindlabs/tailwindui-issues#1625
    @RobinMalfait
    RobinMalfait authored Sep 4, 2024
    Configuration menu
    Copy the full SHA
    971ff6b View commit details
    Browse the repository at this point in the history

  2. 2.1.5 - @headlessui/react

    @RobinMalfait
    RobinMalfait committed Sep 4, 2024
    Configuration menu
    Copy the full SHA
    cb86665 View commit details
    Browse the repository at this point in the history
Loading