Auto complete with TextField is not working properly

[Raja-Techie-45]

I'm using AutoComplete and ListBox to render list of items, and for search I've kept TextField from react-aria-components.

But keeping TextField inside the AutoComplete giving me some unexpected behavior.

The unexpected behavior is if i try to navigate between the options with up and down arrows, the focus is skipping one item and moving to next items. Means focus shift from 0 to 2, 2 to 4, 4 to 6 instead 0,1,2,3,4,5,6 on arrow click.

You can reproduce the issue in the below codesandbox.

https://codesandbox.io/p/sandbox/rac-popover-issue-8tfr9z

[reidbarber]

It looks like the CodeSandbox link you shared isn't public.

[Raja-Techie-45]

@reidbarber updated you can check now

[reidbarber]

You'll need to pass a filter function into Autocomplete: https://react-spectrum.adobe.com/react-aria/Autocomplete.html#example

If you don't provide one, then you're expected to manually filter the items yourself.

[Raja-Techie-45]

@reidbarber filtering is working fine, but the focus navigation using the keyboard arrow keys isn’t behaving as expected. Could you please check the up and down arrow key behavior in this sandbox: https://codesandbox.io/p/sandbox/rac-popover-issue-8tfr9z

[reidbarber]

There is a TextField inside the SearchField, which isn't valid, so if you remove the TextField it should work.