[autocomplete] Fix highlight sync and scroll preservation by mj12albert · Pull Request #48322 · mui/material-ui

mj12albert · 2026-04-18T08:15:15Z

Before: https://stackblitz.com/edit/oeui5u2z-2ocdxxvp?file=src%2FDemo.tsx
After: https://stackblitz.com/edit/oeui5u2z-r5vp8zge?file=src%2FDemo.tsx

Manual testing steps

1. Highlight mismatch when reopening (#48177)

Click the input, then ArrowDown to move the highlight, "two" should be highlighted
Press Esc to close the listbox
ArrowDown once to reopen the listbox, then press Enter

Before: "two" is highlighted by step 3 and removed by Enter (the active highlight was stuck after step 1 and Esc failed to clear it)

After: "one" is highlighted by step 3 and removed by Enter

2. Adding options resets scroll position (#40250)

Click the input to open the listbox
Scroll once to the bottom of the listbox
Wait for more options to be added

Before: when options are added the scroll position resets to the top

After: scroll position preserved when options are added

Without the scroll position fix, it's impossible to make a sane infinite loading UX; example Tanstack Query useInfiniteQuery integration with the fix: https://stackblitz.com/edit/rqmnxopa?file=src%2FDemo.tsx

Fixes #40250
Fixes #48177

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

code-infra-dashboard · 2026-04-18T08:18:00Z

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+430B^(+0.08%)	🔺+94B^(+0.06%)
@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-48322--material-ui.netlify.app/

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

mj12albert

The diff is very noisy due to indentation changes from extracting out functions, so I've commented on the key changes

mj12albert · 2026-04-18T19:57:32Z

+      if (index === -1) {
+        if (!preserveScroll) {
+          listboxNode.scrollTop = 0;
+        }


Highlight 2

Enable resets to index === -1 to opt into preserveScroll

mj12albert · 2026-04-18T19:59:13Z

    // Check if the previously highlighted option still exists in the updated filtered options list and if the value and inputValue haven't changed
    // If it exists and the value and the inputValue haven't changed, just update its index, otherwise continue execution
    const previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex();
    if (previousHighlightedOptionIndex !== -1) {
-      // Bypass setHighlightedIndex to preserve the existing highlightReasonRef.
+      // Keep the original highlight reason while re-syncing the DOM state.
      // The highlighted option still exists after the filteredOptions array changed
      // (e.g. async fetch returns new options while the user is mid-navigation),
      // so the original interaction reason (keyboard, mouse, etc.) still applies.
-      highlightedIndexRef.current = previousHighlightedOptionIndex;
+      setHighlightedIndexFromSync({ index: previousHighlightedOptionIndex });
      return;


Highlight 3

Instead of directly changing highlightedIndexRef.current, call the new setHighlightedIndexFromSync() instead. This is the key fix for the stale visual highlight issue

mj12albert · 2026-04-18T20:02:00Z

+      // Preserve scroll when new options are appended without changing the current filter.
+      const isAppendOnly =
+        filteredOptionsChanged &&
+        previousProps.inputValue === inputValue &&


The important part of the check is previousProps.inputValue === inputValue which differentiates normal filtering from append-only loading

mj12albert · 2026-04-18T20:05:15Z

+        if (previousProps.filteredOptions?.length > 0) {
+          setHighlightedIndexFromSync({ index: highlightedIndexRef.current });
+          return;
+        }


Highlight 4

“keep current highlighted selected option” now only applies when there were previous filtered options, so reopens don't preserve stale highlights

mj12albert · 2026-04-18T20:07:10Z

+  const setHighlightedIndexFromSync = useEventCallback(({ index, preserveScroll = false }) => {
+    highlightedIndexRef.current = index;
+    syncHighlightedIndexToDOM({
+      index,
+      reason: highlightReasonRef.current,
+      preserveScroll,
+    });
+  });


Highlight 1

setHighlightedIndex is split into

syncHighlightedIndexToDOM

setHighlightedIndex

setHighlightedIndexFromSync

setHighlightedIndexFromSync() is the important addition, it re-applies .Mui-focused and aria-activedescendant without changing highlightReasonRef and without firing onHighlightChange

Nice splitting! I like it.

ZeeshanTamboli

Two comments related to tests structure. Rest looks good to me.

…servation-3of5

github-actions · 2026-04-22T11:02:05Z

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 18, 2026

mj12albert force-pushed the autocomplete/fix-highlight-sync-scroll-preservation-3of5 branch from 4701647 to c8d6c80 Compare April 18, 2026 08:52

mj12albert marked this pull request as ready for review April 18, 2026 11:32

mj12albert mentioned this pull request Apr 18, 2026

[autocomplete][multiple] Fixed Active option loses visual highlight after reopening the popup, but Enter still removes it #48177 #48241

Closed

1 task

mj12albert commented Apr 18, 2026

View reviewed changes

mj12albert requested review from ZeeshanTamboli, michelengelen, silviuaavram and siriwatknp April 18, 2026 20:10

mj12albert force-pushed the autocomplete/fix-highlight-sync-scroll-preservation-3of5 branch from c8d6c80 to 2b37e85 Compare April 19, 2026 17:23

mj12albert requested a review from LukasTy April 19, 2026 19:39

mj12albert force-pushed the autocomplete/fix-highlight-sync-scroll-preservation-3of5 branch from 2b37e85 to 321dba2 Compare April 20, 2026 13:52

fix highlight syncing and scroll preservation

a11fe24

mj12albert force-pushed the autocomplete/fix-highlight-sync-scroll-preservation-3of5 branch from 321dba2 to a11fe24 Compare April 20, 2026 14:20

ZeeshanTamboli reviewed Apr 21, 2026

View reviewed changes

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

fix comment

2f1690f

ZeeshanTamboli reviewed Apr 21, 2026

View reviewed changes

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

remove extra param

73171dd

ZeeshanTamboli approved these changes Apr 22, 2026

View reviewed changes

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

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

mj12albert added 2 commits April 22, 2026 18:47

reorganize tests

75a41b9

Merge branch 'master' into autocomplete/fix-highlight-sync-scroll-pre…

bbf0387

…servation-3of5

mj12albert added v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Apr 22, 2026

mj12albert enabled auto-merge (squash) April 22, 2026 10:51

mj12albert merged commit 727c42e into mui:master Apr 22, 2026
21 checks passed

github-actions Bot mentioned this pull request Apr 22, 2026

[autocomplete] Fix highlight sync and scroll preservation (@mj12albert) #48350

Merged

mj12albert deleted the autocomplete/fix-highlight-sync-scroll-preservation-3of5 branch April 22, 2026 11:43

This was referenced May 10, 2026

[autocomplete] New API to control the highlighted option #20852

Open

[autocomplete] highlighted index doesn't get reset if options length is unchanged #40184

Closed

Uh oh!

Uh oh!

Conversation

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

Uh oh!

1. Highlight mismatch when reopening (#48177)

2. Adding options resets scroll position (#40250)

Uh oh!

code-infra-dashboard Bot commented Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size

Deploy preview

Uh oh!

mj12albert left a comment

Choose a reason for hiding this comment

Uh oh!

mj12albert Apr 18, 2026

Choose a reason for hiding this comment

Highlight 2

Uh oh!

mj12albert Apr 18, 2026

Choose a reason for hiding this comment

Highlight 3

Uh oh!

mj12albert Apr 18, 2026

Choose a reason for hiding this comment

Uh oh!

mj12albert Apr 18, 2026

Choose a reason for hiding this comment

Highlight 4

Uh oh!

mj12albert Apr 18, 2026

Choose a reason for hiding this comment

Highlight 1

Uh oh!

ZeeshanTamboli Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mj12albert commented Apr 18, 2026 •

edited

Loading

code-infra-dashboard Bot commented Apr 18, 2026 •

edited

Loading