[autocomplete] Improve highlight tracking and selection state by mj12albert · Pull Request #48219 · mui/material-ui (original) (raw)

Fixes #20602
Fixes #27137
Fixes #46718

Adds highlightReasonRef internally to better handle edge cases created by the item highlight and other interactions.

Codex suggests using pointer events as a better touch/mouse detection strategy to what is currently being used, which is more robust for hybrid devices (iPad with a bluetooth keyboard) but we could do that separately.

Manual testing steps:

1. autoSelect should not select mouse-hovered options on blur: #20602

  1. Combo box demo → add autoSelect via the code editor
  2. Click the input to open the popup
  3. Hover your mouse over an option (don’t click)
  4. Click outside the component to blur

Expected: No option selected — input stays empty

Current: The hovered option IS selected — its value appears in the input after blur

Variation with autoHighlight:

  1. Combo box demo → add both autoSelect and autoHighlight
  2. Click the input to open the popup, observe first option is auto-highlighted
  3. Hover your mouse over that same first option
  4. Click outside to blur

Expected: No option selected (the hover overrides the programmatic highlight reason)

Current: The first option is selected on blur, even though the user only hovered over it.

2. freeSolo Enter should prefer typed text over auto-highlighted match #27137

  1. Free solo demo
  2. Type "The Godfather" and press Enter to select it
  3. Click back into the input
  4. Press Backspace 5 times (input becomes "The Godf" — still matches "The Godfather" in the dropdown)
  5. Press Enter

Expected: "The Godf" is accepted as free text, NOT "The Godfather"

Current (master): "The Godfather" is re-selected (the full original value), not "The Godf". The programmatic highlight from syncHighlightedIndex (which matches the old value) wins over the typed text.

3. Touch-scroll + Enter selects wrong item #46718

This requires a touch device + software keyboard

  1. Combo box demo
  2. Touch the textbox to open the popup
  3. Touch an option to start a drag, then drag to scroll the list (don't lift or tap, it must be dragged so the browser treats it as a scroll gesture)
  4. When the list scrolls a bit, release finger, press Enter ("Return" on iPhone keyboard)

Expected: Popup closes with no option selected

Current (master): The option that was under the initial touch point (before scrolling) is selected. The stale highlight from touchstart is persisted through the scroll, and Enter commits it.