[Autocomplete] the first option is not highlighted for autoHighlight using filterOptions

[tmtk75]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-autocomplete-bug-forked-vj99f8?file=/src/AutocompleteDemo.js:1001-1026

Steps:

1. Click the autocomplete to focus.
2. Move the mouse cursor further from the autocomplete to avoid unintentional focus.
3. Type "god"
4. Expect "The Godfather" at the top is highlighted but "Goodfellas" is highlighted¹.

Current behavior 😯

With v5.11.10, The 4th item, "Goodfellas", is highlighted.

Expected behavior 🤔

With v5.11.6, the 1st item is highlighted expectedly.

Context 🔦

I'm using Fuse for fuzzy searching in filterOptions.

autoHighlight says:

If true, the first option is automatically highlighted.

Currently it behaves unintentionally when Fuse sorts the order of the options.
If I replace Fuse with simple match, it works well. The 1st option is highlighted.
I'm feeling this issue happens when the order of the given options is changed in filterOptions.

It worked with v5.11.6 as I wrote as Expected behavior.

Your environment 🌎

I'm using Chrome 110.0.5481.177.

npx @mui/envinfo

  System:
    OS: macOS 12.6.3
  Binaries:
    Node: 16.14.2 - ~/.anyenv/envs/nodenv/versions/16.14.2/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.5.0 - ~/.anyenv/envs/nodenv/versions/16.14.2/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: 110.0.1587.50
    Firefox: Not Found
    Safari: 16.3
  npmPackages:
    @emotion/react: ^11.4.0 => 11.10.6
    @emotion/styled: ^11.3.0 => 11.10.6
    @mui/base:  5.0.0-alpha.115
    @mui/core-downloads-tracker:  5.11.9
    @mui/icons-material: ^5 => 5.11.9
    @mui/lab: 5.0.0-alpha.120 => 5.0.0-alpha.120
    @mui/material: 5.11.6 => 5.11.6
    @mui/private-theming:  5.11.9
    @mui/styled-engine:  5.11.9
    @mui/styles: ^5.11.7 => 5.11.9
    @mui/system:  5.11.9
    @mui/types:  7.2.3
    @mui/utils:  5.11.9
    @types/react: ^18 => 18.0.28
    react: ^18 => 18.2.0
    react-dom: ^18 => 18.2.0
    typescript: ^4.0.5 => 4.9.5

Footnotes

1. When type enter, "The Godfather" is selected :-) ↩

[sai6855]

@tmtk75 in v5.11.6 highlighted option would always reset whenever options are changed but from v5.11.7 highlighted option would only reset if previously highlighted option is not present in new options to support #29508

So the behaviour you are expericing is expected behaviour

[tmtk75]

@sai6855 thanks for your reply.

I'm not sure of #29508 well but autoHighlight says like this.

https://mui.com/material-ui/api/autocomplete/#props

If true, the first option is automatically highlighted.

The current behavior looks weird to me.

Also I wrote as a footnote, in the example to reproduce Godfather is entered when I type enter even though Goodfellas is highlighted.

This is unnatural. I don't think it's expected behavior.

[sai6855]

If true, the first option is automatically highlighted.

i think this applies only on initial render of listbox.

This is unnatural. I don't think it's expected behavior.

yes you right, there is bug somewhere.

i think this issue is related to #33634

[michaldudak]

I suppose we can only run the highlight restoration logic when the options change without changing the input. It's how browser address fields work.
Then, the lazy loading of options would still work without resetting the highlight.

[bencevoros]

Is there any update on this issue? I'd like to fix it if no one has started.