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

Fix `transition` and `focus` prop combination for `PopoverPanel` component #3361

Closed RobinMalfait closed 2 months ago

RobinMalfait commented 2 months ago

This PR fixes an issue where the combination of the focus and transition prop on the PopoverPanel component didn't work as expected.

The issue is that we moved focus inside the PopoverPanel in an effect, and we relied on a useRef to get access to the PopoverPanel DOM node. However, due to the transition, this ref wasn't filled in. The moment the ref is filled in, it's too late and the effect doesn't re-run anymore.

Instead, we rely on the DOM element that's coming from state. This one is updated and will re-render the component because we update the state when the ref is available.

Fixes: #3358

vercel[bot] commented 2 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 4, 2024 10:33am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 4, 2024 10:33am