[Autocomplete] Autohighlight does not work properly with repeated options

[acai777]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/quizzical-dewdney-wv3jzg
2. Search for the term pediatric - notice how the autohighlight is NOT on the first dropdown item. However, if we press enter, we will still correctly select the first dropdown item (pediatrician)
3. Delete the last letter c so that we have the term pediatri - notice how the autohighlight is now on pediatrician, the third term. If we press enter, we correctly select the first dropdown item, pediatric ent.

Current behavior

autohighlight styling is not always on the first dropdown item if the previous first row item is on the most recent batch of dropdown options and is in a different row/order. See steps to recreate this behavior.

CleanShot.2025-02-10.at.12.48.38.mp4

Expected behavior

autohighlight styling should always initially be on the first dropdown item

Context

I am using MUI's autocomplete for a specific use case. I do not filter down the results the more you type. Instead, I might return different results, or the same results but in a different order.

In this example, I simulate the bug that I am seeing in my application. You will notice that the autohighlight attribute does not work properly when the next batch of options contains the previous first row's option; we highlight the previous first dropdown item when we should highlight the new first option. However, if the user presses Enter, the component still correctly selects the first row (assuming the user hasn't manually highlighted some other row).

Is there a fix for this, or a workaround I am missing? I have searched past issues and it seems like something similar has come up (but no potential fixes).

Your environment

I am using version 5 (see package.json).

Search keywords: Autocomplete, autohighlight

[aarongarciah]

Looks like a bug. @mj12albert can you take a look?

[ZeeshanTamboli]

Instead, I might return different results, or the same results but in a different order.

@acai777 Why do you change the order for the same results? What's your use-case? I think this affects the auto-highlight of the first option.

[acai777]

@ZeeshanTamboli This is the order that results come back from our API. Our API returns results in order of relevance to the input, where the first term is the closest in semblance to the current input. For this reason, we have situations like the above where, sometimes, the same results are returned, but in different order. Hope this clarifies our use-case.

[ZeeshanTamboli]

@acai777 Got it. Thanks.

[ZeeshanTamboli]

This is the same issue as #33634. When highlighting an option, new async options aren't considered immediately. Until they arrive, the old options are considered in the highlighting logic, causing it to reset once the new options load.

[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.