[Autocomplete] onHighlightChange does not trigger when options changes but not the length

[vincent1114]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Changing options asynchronously will with autoHighlight have weird behaviour with onHighlightChange when options are changed but coincidentally the length doesn't change. The onHighlightChange don't trigger, or the first item does not get highlighted properly.

The behaviour is normal if options length changes.

Expected behavior 🤔

With autoHighlight it should properly highlight first item on any options change including options.length , as well as triggering onHighlightChange.

Steps to reproduce 🕹

Steps:

1. Asynchronously change options but does not change the length of the array with a slight delay
2. autoHighlight enabled
3. onHighlightChange set up to see what's being highlighted
4. Change input to see the first item does not get highlighted after a change
5. Change input again to see the previous first item became the highlighted item
   https://codesandbox.io/s/loving-cerf-d212pw

Context 🔦

I'm trying to use this to fetch options async on every input change, like google search. Using onHighlightedChange to track currently highlighted item and direct it to onKeyDown on the input component. I couldn't use onChange because I wanted to track other keys pressed with enter to open in a new tab or a new window.

Looking at the source code, this line and comment is suspicious:
https://github.com/mui/material-ui/blob/master/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L503

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[martinmckenna]

Seeing the same thing in my project too. would love to see this fixed soon!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[ViktorZhurbin]

Did this #46489 accidentally or intentionally break triggering onHighlightChange when list opens and autoHighlight is on? An item gets highlighted without onHighlightChange being called

[siriwatknp]

Did this #46489 accidentally or intentionally break triggering onHighlightChange when list opens and autoHighlight is on? An item gets highlighted without onHighlightChange being called

@ZeeshanTamboli Can you verify this?

[ZeeshanTamboli]

Did this #46489 accidentally or intentionally break triggering onHighlightChange when list opens and autoHighlight is on? An item gets highlighted without onHighlightChange being called

@ViktorZhurbin I am not able to understand what you mean without a reproduction. When autoHighlight is on, the first item in the list of options gets highlighted by default whether you have onHighlightChange or not. That's the behaviour of autoHighlight prop.