Auto-selection of first item doesn't work with deferred values / suspense queries

[arvinpoddar]

When using a deferred value to make a query (closely referencing the useDeferredValue docs example: https://react.dev/reference/react/useDeferredValue#usage), the first item in the list is not always highlighted when the query results update. Only after additional query refinement will the first result become selected.

We do get the desired behavior if we remove the shouldFilter={false}, but the auto-selection behavior should still work if you're relying on external filtering behavior.

Reproduction CodeSandbox: https://codesandbox.io/p/devbox/cmdk-suspense-9jth8l

Reproduction Video:

https://github.com/pacocoursey/cmdk/assets/8345645/65fe6144-ca2f-4e7f-b85c-755f6fade837

Thank you!

[updbqn]

A workaround is to make the Command component controlled and set the selected item yourself when the items change.

https://codesandbox.io/p/devbox/cmdk-suspense-forked-8qsltv?workspaceId=693b57f1-c881-460c-b8d5-92868a4692cc

[arvinpoddar]

A workaround is to make the Command component controlled and set the selected item yourself when the items change.

https://codesandbox.io/p/devbox/cmdk-suspense-forked-8qsltv?workspaceId=693b57f1-c881-460c-b8d5-92868a4692cc

Yep, ultimately the workaround we implemented was something like this, but it feels hacky to have to have a side effect on state to accomplish this. Ideally, the behavior should come baked in with Command if the user is not using it as a controlled component.