mui / mui/material-ui

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

Open
#48,729 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: autocomplete type: enhancement waiting for 👍
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in useAutocomplete.js and trace how autoHighlight chooses defaultHighlighted when ArrowUp opens the popup; compare the behavior with the WAI-ARIA combobox guidance. Done means ArrowUp highlights the last option and ArrowDown retains first-option behavior, including the controlled-open reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.