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

[kgregory]

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

[dylanwulf]

It looks like the useAutocomplete hook is no longer setting the data-focus attribute

[kgregory]

It looks like the useAutocomplete hook is no longer setting the data-focus attribute

Thanks!

    // v4 - useAutoComplete

    const prev = listboxRef.current.querySelector('[data-focus]');
    if (prev) {
      prev.removeAttribute('data-focus');
    }

    // v5 - useAutocomplete

    const prev = listboxRef.current.querySelector('[role="option"].Mui-focused');
    if (prev) {
      prev.classList.remove('Mui-focused');
      prev.classList.remove('Mui-focusVisible');
    }

This change was made in #26181

These demos are still relying on data-focus, which is no longer being applied:

• Autocomplete > useAutocomplete
• Autocomplete > useAutocomplete > Customized Hook
• Autocomplete > Customization > GitHub's Picker

Using .Mui-focused instead of [data-focus="true"] fixes the demos (see modified codesandbox)

[ZeeshanTamboli]

Created a pull request to update the demos in #32757

[oliviertassinari]

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

[kgregory]

@oliviertassinari it's all good!

[makarenkovdo]

I've just update @mui/material(5.10.4) and @mui/base(5.0.0-alpha.96)... But arrow-keys don't highlight options. Any solutions?

[JOELJOSEPHCHALAKUDY]

got a solution for older versions applying the following style worked for me

adding the following solved my problem

  '& [role="option"].Mui-focusVisible': {
    borderLeft: '4px solid',
  },

check the detailed styling below :

export const CustomPaper = styled(Paper)(() => ({
  marginTop: '15px',
  '& li:hover': {
    borderLeft: '4px solid',
  },
  '& [role="option"].Mui-focusVisible': {
    borderLeft: '4px solid',
  },
  '& li[aria-selected="true"]': {
    backgroundColor: webDesignStyleConstants.palette.grey1 + '!important',
    borderLeft: '4px solid',
  },
  '& li[data-focus="true"]': {
    backgroundColor: webDesignStyleConstants.palette.grey1 + '!important',
    borderLeft: '4px solid',
  },
}));