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 `ListboxOptions` being incorrectly marked as `inert` #3466

Closed RobinMalfait closed 3 weeks ago

RobinMalfait commented 3 weeks ago

This PR fixes an issue where the ListboxOptions component was incorrectly marked as inert.

We only mark the other elements on the page as inert once the Listbox is in a visible state. The issue is that the data.optionsElement (a reference to the DOM node) was not populated with the actual DOM node yet at the time the useInertOthers(…) hook was applied.

Due to the usage of useEvent(…), instead of useCallback(…) the internal useEffect(…) hook didn't re-run because the allowed function was already stable.

With this fix, the allowed function will change whenever its dependencies change.

Fixes: #3464

vercel[bot] commented 3 weeks 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 Sep 9, 2024 4:41pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 9, 2024 4:41pm