The reproduction above sets up the following scenario:
A const [showCombobox, setShowCombobox] = useState(false) is used to hide/show a combobox, initially set to false.
A combobox is conditionally rendered, with {showCombobox && <Combobox immediate ....></Combobox>}
The ComboboxInput is set to autoFocus
When changing the state to setShowCombobox(true), React yields the following warning:
Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.
The specific scenario in my app is a data grid. The grid starts out in "read mode", and displays values as plain divs with text. When cells in the grid are focused, they enter "edit mode", and my headlessui combobox based editor appears conditionally and is immediately focused, causing the flushSync in headlessui to be called while React renders the data grid cell.
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
2.1.1
What browser are you using?
Firefox
Reproduction URL
https://codesandbox.io/p/devbox/competent-lichterman-wxf42g
Describe your issue
The reproduction above sets up the following scenario:
const [showCombobox, setShowCombobox] = useState(false)is used to hide/show a combobox, initially set to false.{showCombobox && <Combobox immediate ....></Combobox>}ComboboxInputis set toautoFocusWhen changing the state to
setShowCombobox(true), React yields the following warning:The code in headlessui that seems to cause this: https://github.com/tailwindlabs/headlessui/blob/abd86fca3e3dac3bb9c884ecc2012a590e33d29a/packages/%40headlessui-react/src/components/combobox/combobox.tsx#L1323
The specific scenario in my app is a data grid. The grid starts out in "read mode", and displays values as plain divs with text. When cells in the grid are focused, they enter "edit mode", and my headlessui combobox based editor appears conditionally and is immediately focused, causing the
flushSyncin headlessui to be called while React renders the data grid cell.