Skip to content

[Autocomplete][multiple] Active option loses visual highlight after reopening the popup, but Enter still removes it #48177

@pcourant

Description

@pcourant

Steps to reproduce

Steps:

  1. Open this link to live example: https://mui.com/material-ui/react-autocomplete/#multiple-values
  2. Select one or more options.
  3. Close the popup.
  4. Reopen the popup by focusing the input again.
  5. Observe that no option appears visually highlighted/focused in the list.
  6. Press Enter.
  7. An already selected option is toggled off / removed from the value even though there was no visible highlighted option.

Image

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

Metadata

Metadata

Assignees

Labels

scope: autocompleteChanges related to the autocomplete. This includes ComboBox.status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions