-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
[Autocomplete][multiple] Active option loses visual highlight after reopening the popup, but Enter still removes it #48177
Description
Steps to reproduce
Steps:
- Open this link to live example: https://mui.com/material-ui/react-autocomplete/#multiple-values
- Select one or more options.
- Close the popup.
- Reopen the popup by focusing the input again.
- Observe that no option appears visually highlighted/focused in the list.
- Press Enter.
- An already selected option is toggled off / removed from the value even though there was no visible highlighted option.
Current behavior
In multiple mode, reopening the popup seems to preserve an internal active/highlighted option, but the visual highlight is lost.
No option appears focused in the list, yet pressing Enter still acts on one already selected option and deselects it.
From a user perspective, the component has an actionable highlighted state but does not render it.
Expected behavior
The visual highlighted/focused state should always match the option that Enter will act on.
On reopen, MUI should either:
restore the visible highlight on the active option, or
reset the highlighted option so that Enter is a noop until an option is visibly highlighted.
There should not be a state where Enter deselects an option that is not visually indicated as active.
Context
I am reporting this specifically as a visual state mismatch / keyboard UX issue, not only as “Enter deselects a selected option”.
I searched for related issues before opening this one:
#44936 discusses keyboard accessibility problems in the “Multiple Values” example and mentions Enter removing a selected option.
#44640 discusses highlight behavior when options are already selected, but that issue was closed as expected behavior.
#48093 discusses lost focus/highlight in Autocomplete after rerender.
I believe this report is distinct because the core issue here is the following:
after reopening the popup, an option is still actionable via Enter, but no option is visibly highlighted.
I attached a GIF showing the behavior.
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: autocomplete, multiple values, multiple, reopen popup, highlighted, highlight, focused, Mui-focused, selected option, Enter, deselect, toggle, keyboard, accessibility, a11y
