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 `flushSync` warning for `Combobox` component with `immediate` prop enabled #3366

Closed RobinMalfait closed 2 months ago

RobinMalfait commented 2 months ago

This PR fixes an issue where React shows a warning that it is not able to use flushSync while it's already rendering.

The recommended solution in that case is to move the flushSync call to a scheduler task or micro task.

The scenario where it happens in this case:

{condition && (
  <Combobox immediate>
    <ComboboxInput autoFocus />
  </Combobox>
)}

This will conditionally render the Combobox with the immediate prop (which means that it will open once the ComboboxInput receives focus). But the ComboboxInput also has the autoFocus prop which means that it will focus immediately when it's rendered.

Fixes: #3334

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 5, 2024 3:29pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 5, 2024 3:29pm