PopoverPanel with transition set to true cannot be closed in @headlessui/react v2.1.3

[lancechentw]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.3, specifically commit 2260422

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/currying-brook-9fv9sh

Describe your issue

PopoverPanel with transition set to true cannot be closed, while the one without transition attr works fine.

[Zertz]

We've had a problem with 2.1.3 that's likely related: a Listbox inside a Dialog can be opened but not interacted with in any way. 2.1.2 worked as expected.

[RobinMalfait]

Hey sorry about the regression!

This should be fixed by #3448, and will be available in the next release (2.1.4).

You can already try it using:

• npm install @headlessui/react@insiders.

[mrlubos]

@RobinMalfait not sure what broke in 2.1.3, but I am seeing an issue starting in 2.1.3 and present in 2.1.5 where a click on Combobox/Listbox options does not work. Well, that's not quite accurate, spamming the option item with clicks works, but that's not a typical user behaviour. These options are rendered inside a Transition component if that gives any pointers. Sorry for not having a reproducible example, just wanted to flag this in case you're not aware, 2.1.3 broke quite a few things.

[short-dsb]

Same as @mrlubos, we’re seeing an issue where it’s not possible to interact with Listbox components that employ a Transition. Everything works as intended in 2.1.2.

[MNeverOff]

I'm observing similar issues with Transition in @headlessui/react on 2.1.3 and newer (including 2.1.6), for me it mostly manifests as a TypeError: e.getAnimations is not a function in tests, and the functionality itself not working (component doesn't close once the underlying data that it supposed to display is removed from state).

[xsjcTony]

@MNeverOff Yeah I'm suffering the same issue, looks like they manually poly-filled it in the test😂
https://github.com/tailwindlabs/headlessui/pull/3452/files

[RobinMalfait]

@MNeverOff @xsjcTony sadly jsdom isn't up to date with newer APIs. We rely on the getAnimations API (which has been available since 2020 in browser) but isn't available in jsdom.

If you use it in tests, I would recommend to polyfill it or an even better solution is to not use jsdom and use real browser based tests using something like Playwright.

I noticed that you (@MNeverOff) commented on #3467 where you ran into similar issues. In the case of that issue it was not working due to conflicting class names which meant that there was no transition happening at all (but the dialog did open/close correctly).

If you run into issue where the component doesn't correctly behave, could you open a new issue with a minimal reproduction repo attached so we can take a look?

@xsjcTony the issue that you are running into is it about the issue you opened or a different one?

[xsjcTony]

@RobinMalfait My issue is with the test, and I used the polyfill there.

[mrlubos]

@RobinMalfait I can confirm this seems to be resolved in 2.1.8 🎉