Keyboard navigation in Autocomplete component not working with dynamic data

[Madhavkabra]

When using Autocomplete component with dynamic options in suspense, the keyboard navigation breaks.

You can see, we do not get focus on the first item This problem does not happen when having a static list of options

Also, tried replicating this issue on stackblitz and codesandbox, but got "addHotKeys is not a function" error. Stackblitz -> https://stackblitz.com/edit/stackblitz-starters-zfggn9?file=app%2Fpage.tsx Codesandbox -> https://codesandbox.io/p/sandbox/gracious-wright-hv5thr

[blvdmitry]

Thanks for reporting, I have an idea why that might be happening, adding it to the upcoming release as well

[blvdmitry]

I thought I knew why this is happening but still struggling reproducing this. I've tried a few options with async loading of the items but it still works.

A few notes:

• In order to make your sandbox examples work - you need to wrap the application with Reshaped provided and pass a theme, similar to a regular app development
• Autocomplete keyboard navigation should work with arrow keys, while real focus still stays on the input in both static and dynamic examples to let the user keep typing (I do see that first item in your example didn't get highlighted with gray)

[blvdmitry]

I think I got closer. I can get the reproduction of a use case when the first item doesn't get highlighted. Does pressing an arrow key still highlights it in your case as well?

[blvdmitry]

Got it working with this example, where I simulate data fetching every time I'm changing the input. Will be out with the next patch after I figure out a better approach for using framework links together with tabs :)

https://github.com/formaat-design/reshaped/assets/887379/83f384e0-aca6-482a-9a3f-a204bae98227

[Madhavkabra]

Awesome @blvdmitry. I will try to find some more time to help you reproduce them next time.