New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
AutocompleteInput selects a value other than the highlighted one #9593
Comments
Idk why, trying your stackblitz raised an error Although I managed to create a working stackblitz with the same code, and indeed I can reproduce the issue there. Thanks for the report! |
IMO and after some investigations, setting your own state to change the choices collides with the |
What you were expecting:
We are using an
AutcompleteInput
with options provided by an external backend. In particular, the backend yields filtered and sorted options based on the user's input. We keep track of the user input within a React state (updated by theonInputChange
callback), which is in turn passed to React/Tanstack query to fetch the options. The order of the search results is only stable for the same query string, i.e. can change if you type further characters.While this works fine, we get some flaky highlighting behavior when we set
autoHighlight
to true. According to the MUI documentation, this prop selects the first element in the list. That is, once you press "Enter", you select the first element. While the selection works fine, the first option is not always highlighted although it will be selected when you press "Enter".What happened instead:
The highlighted option is not the first one. Sometimes, there is even no highlighted option at all.
Steps to reproduce:
Related code:
https://stackblitz.com/edit/github-fvmfaw?file=src%2FCreateView.tsx
Other information:
The same example works with Material UI, see https://stackblitz.com/edit/stackblitz-starters-wxu1kv?file=src%2FApp.tsx
Environment
The text was updated successfully, but these errors were encountered: