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
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:
Environment: