[Combobox] Issue with auto-selecting first item in Combobox when using useDeferredValue

[isBatak]

Description

I'm trying to optimize the Combobox component for cases where rendering the items takes a long time. My approach is based on useDeferredValue, as explained in the React docs.

I'll provide a reproduction example with three variations:

1. Combobox without artificial slowdown.
2. A slow combobox.
3. An optimized combobox using useDeferredValue.

The issue
In some cases, auto-selecting the first element in the results doesn’t work correctly when combining the combobox with useDeferredValue.

My hunch
The first-item detection seems to happen inside Combobox.Root using collection. Could we move this logic<Combobox.List> component so React can better control the execution order? This way, the first-item selection would align more with the chunk of work handled by the list rendering.

Recordings:

deferred.mp4

deferred.2.mp4

This issue is tricky to reproduce consistently, as the behavior isn't constant. You may need to enter the search string multiple times to observe the problem.

Github repo: https://github.com/isBatak/react-ark-ui-combobox-optimization-issue

Link to Reproduction (or Detailed Explanation)

https://stackblitz.com/~/github.com/isBatak/react-ark-ui-combobox-optimization-issue?file=src/App.tsx

Steps to Reproduce

No Optimization:

1. Click on the "Menu with disabled artificial slowdown."
2. Start typing "las" in the input field.
3. The "Lasagne" item should appear first in the results and be auto-selected.

Slow Example:

1. Click on the "Slow Menu."
2. Start typing "las" in the input field.
3. Notice that the input starts lagging as you type.
4. The "Lasagne" item should eventually appear first in the results and be auto-selected.

Deferred Example:

1. Click on the "Deferred Menu."
2. Start typing "las" in the input field.
3. The input will not lag, but the rendering of the results will be deferred.
4. The "Lasagne" item may sometimes appear first and be selected, but other times it won’t be auto-selected.

Ark UI Version

4.8.1

Framework

• React
• Solid
• Vue

Browser

Chrome

Additional Information

No response