search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

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

Closed lancechentw closed 4 weeks ago

lancechentw commented 1 month ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.3, specifically commit 226042231d7529d530be7c65790fbb681b5adb63

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 commented 1 month ago

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 commented 4 weeks ago

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:

mrlubos commented 3 weeks ago

@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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

@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 commented 3 weeks ago

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

mrlubos commented 4 hours ago

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