React warning flushSync was called from inside a lifecycle method when conditionally displaying an immediate and autofocused combobox

[augustl]

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:

• 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 code in headlessui that seems to cause this:

headlessui/packages/@headlessui-react/src/components/combobox/combobox.tsx

Line 1323 in abd86fc

flushSync(() => actions.openCombobox())

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.

[RobinMalfait]

This should be fixed by #3366, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.