Skip to content

[autocomplete] autoHighlight should highlight last option when popup opens via ArrowUp #48729

Description

@ricardocambra

Current behavior:
When autoHighlight={true} is set, the MUI Autocomplete always highlights the first option (index 0) when the popup opens, regardless of how it was opened.

Expected behavior:
Per https://www.w3.org/WAI/ARIA/apg/patterns/combobox/:
"ArrowUp: If the popup is not displayed, displays the popup and moves focus into the popup to the last option."

When the popup opens due to an ArrowUp keypress, the last option should be highlighted. When opened via ArrowDown, the first option should be highlighted (current behavior).

Root cause:
In useAutocomplete.js:
const defaultHighlighted = autoHighlight ? 0 : -1;
defaultHighlighted is always 0 — there's no way to express "last option" as the default, nor does autoHighlight receive directional context about how the popup was opened.

Proposed fix:
Extend autoHighlight (or add a new prop like autoHighlightDirection) to accept 'first' | 'last', or expose an imperative setHighlightedIndex that consumers can call after opening.

Steps to reproduce:

  1. Set autoHighlight={true} and open as a controlled prop
  2. Open the popup programmatically in response to an ArrowUp keypress
  3. Observe: first option is highlighted instead of last

Environment:

  • @mui/material: 7.3.9
  • React: 18

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: autocompleteChanges related to the autocomplete. This includes ComboBox.type: enhancementIt’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.waiting for 👍Waiting for upvotes. Open for community feedback and needs more interest to be worked on.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions