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

Ensure `unmount` on `Dialog` works in combination with the `transition` prop on `DialogBackdrop` and `DialogPanel` components #3352

Closed RobinMalfait closed 3 months ago

RobinMalfait commented 3 months ago

Only the Dialog accepts an unmount prop because it's the Dialog that is conditionally rendered and the DialogBackdrop and DialogPanel will conditionally show together with the Dialog.

However, now that the Dialog is wrapped in a Transition (which can be unmounted) and the DialogBackdrop and DialogPanel will also be wrapped in a TransitionChild (when the transition prop is passed) then we do have to deal with the unmount state on the TransitionChild.

This is important because if you make the Dialog unmount={false}, then the DialogPanel will still unmount because the TransitionChild is unmounting its children. This now means that you will lose data (such as form state of inputs).

This PR solves that by inheriting the unmount state of the Dialog in the TransitionChild wrappers such that they behave the way you expect them to behave.

Fixes: #3348

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 1, 2024 0:29am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 1, 2024 0:29am