[Autocomplete] useAutocomplete not highlighting options on hover or during arrow key traversal
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Autocompletes implemented with useAutocomplete
do not highlight the options presented in the popper when presented. Additionally, when the user attempts to select an option by using the up or down arrow key, the selected row is not highlighted.
Key navigation is functional, in that the user is able to navigate to an option, press enter, and select it, but there is no visual feedback to let them know which option they’ve selected.
See the MUI v5 Autocomplete Demo
Expected behavior 🤔
The options should be highlighted when hovered and when the user uses the up or down arrow key while the popper is presented.
See the MUI v4 Autocomplete Demo
Steps to reproduce 🕹
Steps (see this codesandbox):
- Focus the autocomplete field by pressing the tab key
- Press the down arrow key to present the options
- Hover over any of the presented options and observe that they do not highlight
- Press the down arrow several times until the popper presenting the options scrolls a bit
- Press the enter key and whichever option you’ve navigated to will be added as a selected option
Context 🔦
I have updated a MUI v4 app to v5 and noticed the referenced deficiencies in our autocompletes.
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19044
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 14.84 GB / 31.73 GB
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Utilities:
Git: 2.31.1. - C:\Program Files\Git\cmd\git.EXE
IDEs:
VSCode: 1.66.2 - C:\Users\KJG\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
Languages:
Bash: 4.4.23 - C:\Program Files\Git\usr\bin\bash.EXE
Perl: 5.32.1 - C:\Program Files\Git\usr\bin\perl.EXE
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.32)
Internet Explorer: 11.0.19041.1566
I am using Chrome
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:7 (4 by maintainers)
Top GitHub Comments
Created a pull request to update the demos in #32757
Oops, my bad, I missed this in the review of #26181.