[autocomplete] autoHighlight should highlight last option when popup opens via ArrowUp
Nobody has claimed this yet.
- 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:
- Set autoHighlight={true} and open as a controlled prop
- Open the popup programmatically in response to an ArrowUp keypress
- Observe: first option is highlighted instead of last
Environment:
- @mui/material: 7.3.9
- React: 18
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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