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

mj12albert · 2026-04-07T08:54:59Z

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

Combo box demo → add autoSelect via the code editor
Click the input to open the popup
Hover your mouse over an option (don’t click)
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:

Combo box demo → add both autoSelect and autoHighlight
Click the input to open the popup, observe first option is auto-highlighted
Hover your mouse over that same first option
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

Free solo demo
Type "The Godfather" and press Enter to select it
Click back into the input
Press Backspace 5 times (input becomes "The Godf" — still matches "The Godfather" in the dropdown)
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

Combo box demo
Touch the textbox to open the popup
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)
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.

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2026-04-07T08:56:14Z

Netlify deploy preview

https://deploy-preview-48219--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	🔺+435B^(+0.09%)	🔺+136B^(+0.09%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against d1087f6

mj12albert · 2026-04-07T09:25:39Z

+          if (
+            highlightedIndexRef.current !== -1 &&
+            popupOpen &&
+            shouldSelectHighlighted &&
+            // After a touch-scroll the highlight is stale (the user scrolled
+            // past it), so skip selection until the next deliberate interaction.
+            !touchScrolledRef.current
+          ) {


This if now accounts for both #27137 and #46718

ZeeshanTamboli

I think we should remove the text "without highlighting an option" from the autoSelect JSdoc description: https://mui.com/material-ui/api/autocomplete/#autocomplete-prop-autoSelect.

So now it should be:

If true, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input.
When using the freeSolo mode, the typed value will be the input value if the Autocomplete loses focus.

ZeeshanTamboli

Left two comments.

Looks good to me. Great fixes!

silviuaavram · 2026-04-16T10:48:31Z

+  const highlightReasonRef = React.useRef(null);
+
+  const touchScrolledRef = React.useRef(false);
+  const isTouch = React.useRef(false);


add Ref to the variable, for consistency

silviuaavram · 2026-04-16T10:57:41Z

+    // Mouse hover and touch should not trigger selection — the user may have
+    // moved the pointer over an option without intending to commit to it.
+    if (
+      autoSelect &&


So are we not anymore selecting the highlighted item when we blur by mouse? It still works when blurring by Tab.

It's not the blur itself, but what caused the highlight.

If the highlight is by hover or touch, blur (Tab or outside click) will not autoSelect.

Otherwise if the highlight is from keyboard interaction or was set automatically (autoHighlight or internal syncing), blur will autoSelect it

code-infra-dashboard · 2026-04-17T12:30:43Z

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+439B^(+0.09%)	🔺+135B^(+0.09%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/private-theming	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-48219--material-ui.netlify.app/

Check out the code infra dashboard for more information about this PR.

github-actions · 2026-04-17T12:39:29Z

Cherry-pick PRs will be created targeting branches: v7.x

mj12albert added type: bug It doesn't behave as expected. scope: autocomplete Changes related to the autocomplete. This includes ComboBox. labels Apr 7, 2026

mj12albert commented Apr 7, 2026

View reviewed changes

mj12albert force-pushed the autocomplete/highlight-and-selection-1of5 branch 2 times, most recently from c4c814d to 587749d Compare April 7, 2026 23:24

mj12albert added 3 commits April 11, 2026 00:27

improve highlight tracking and selection state

98b2576

close popup on enter

451aabb

adjust touch scroll guard clear

b04c1f0

mj12albert force-pushed the autocomplete/highlight-and-selection-1of5 branch from 587749d to b04c1f0 Compare April 10, 2026 16:28

mj12albert marked this pull request as ready for review April 10, 2026 16:28

mj12albert requested review from ZeeshanTamboli, silviuaavram and siriwatknp April 10, 2026 16:29

ZeeshanTamboli reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/mui-material/src/Autocomplete/Autocomplete.test.js

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js

ZeeshanTamboli reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js

add freeSolo + autoSelect blur sequence regression test

1ffd021

ZeeshanTamboli reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js

ZeeshanTamboli reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js

mj12albert added 2 commits April 15, 2026 22:24

comment

3dd953c

test

1e37bad

ZeeshanTamboli reviewed Apr 16, 2026

View reviewed changes

Comment thread packages/mui-material/src/useAutocomplete/useAutocomplete.js Outdated

ZeeshanTamboli approved these changes Apr 16, 2026

View reviewed changes

silviuaavram reviewed Apr 16, 2026

View reviewed changes

fix more comments

9be3e9f

mj12albert force-pushed the autocomplete/highlight-and-selection-1of5 branch from d734437 to 1518e59 Compare April 16, 2026 18:26

jsdoc

8a511b9

mj12albert force-pushed the autocomplete/highlight-and-selection-1of5 branch from 1518e59 to 8a511b9 Compare April 16, 2026 18:57

polish jsdoc

d1087f6

mj12albert added the v7.x label Apr 17, 2026

mj12albert added the needs cherry-pick The PR should be cherry-picked to master after merge. label Apr 17, 2026

Merge branch 'master' into autocomplete/highlight-and-selection-1of5

590add1

mj12albert enabled auto-merge (squash) April 17, 2026 12:27

mj12albert merged commit 47710f7 into mui:master Apr 17, 2026
23 checks passed

github-actions bot pushed a commit that referenced this pull request Apr 17, 2026

[autocomplete] Improve highlight tracking and selection state (#48219)

0961332

github-actions bot mentioned this pull request Apr 17, 2026

[autocomplete] Improve highlight tracking and selection state (@mj12albert) #48318

Merged

Uh oh!

Conversation

mj12albert commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Manual testing steps:

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

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

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

Uh oh!

mui-bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

mj12albert Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

silviuaavram Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

silviuaavram Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

code-infra-dashboard bot commented Apr 17, 2026

Bundle size

Deploy preview

Uh oh!

Uh oh!

github-actions bot commented Apr 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mj12albert commented Apr 7, 2026 •

edited

Loading

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

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

mui-bot commented Apr 7, 2026 •

edited

Loading