search

tailwindlabs / headlessui

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

Transition and Dialog losing inert when toggling in quick succession #3503

Open xxRockOnxx opened 1 month ago

xxRockOnxx commented 1 month ago

What package within Headless UI are you using?

@headlessui/vue v1.7.23

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/kind-jang-nwrcpw

Describe your issue

Transition and Dialog does not seem able to handle spam toggling.

Reproduction steps

In the given reproduction, just spam click the toggle button (or open then click 3 times in quick succession).

Continue clicking on the button and it won't close anymore.

Information

What happens is if you spam the toggle, the root div loses its inert attribute which then triggers close then toggle again.

However if you don't spam the toggle, the root div get its inert attribute correctly thus making the toggle button inaccessible.

Workaround You can click somewhere else or press the Escape key though.

If you remove the classes from TransitionChild however i.e enter, enter-to, enter-from, etc. it does work.