question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Autocomplete] useAutocomplete not highlighting options on hover or during arrow key traversal

See original GitHub issue

Duplicates

  • 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):

  1. Focus the autocomplete field by pressing the tab key
  2. Press the down arrow key to present the options
  3. Hover over any of the presented options and observe that they do not highlight
  4. Press the down arrow several times until the popper presenting the options scrolls a bit
  5. 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:closed
  • Created a year ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
ZeeshanTambolicommented, May 13, 2022

Created a pull request to update the demos in #32757

1reaction
oliviertassinaricommented, May 23, 2022

Oops, my bad, I missed this in the review of #26181.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material UI Autocomplete: highlighted option should become ...
Unfortunately, the highlighted state of the option is lost upon saving the title or value of the option as the input. Is there...
Read more >
Fix highlighting of options when selected with arrow keys
Once the results pop up beneath the text box, users should be able to hit the down arrow (and up arrow) to scroll...
Read more >
Global Human Resources Cloud - Oracle Help Center
Configuring and Extending HCM Using Autocomplete Rules ... Highlight specific words in the requirement you want coded and determine the sample values in...
Read more >
Coc autocomplete with tab
CoC tab autocompletion not working properly. Hi! I recently noticed that when using CoC in neovim, the plugin is not able to autocomplete...
Read more >
Feature Updates - isee systems
When it is possible, units are also set automatically while working in ... in the Model Settings Properties Panel changes will not be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found