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 crash when using `as={Fragment}` on `MenuButton`, `ListboxButton`, `DisclosureButton` or `Button` components #3478

Closed RobinMalfait closed 2 weeks ago

RobinMalfait commented 2 weeks ago

This PR fixes an issue where a maximum update depth exceeded error was thrown when using as={Fragment} on button related components.

The issue here is that the ref on a element would re-fire every render if the a function was used and the function is a new function (aka not a stable function).

This resulted in the ref being called with the DOM element, then null, then the DOM element, then null, and so on.

To solve this, we have to make sure that the ref is always a stable reference.

Fixes: #3476 Fixes: #3439

vercel[bot] commented 2 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 12, 2024 9:28am
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 12, 2024 9:28am