[autocomplete][multiple] Fixed Active option loses visual highlight after reopening the popup, but Enter still removes it #48177#48241
Open
taralshah09 wants to merge 5 commits intomui:masterfrom
Conversation
Netlify deploy previewhttps://deploy-preview-48241--material-ui.netlify.app/ Bundle size report
|
When reopening the popup in multiple-values mode, the internal highlighted option reference was restored but the visual CSS class was not applied, causing a state mismatch where Enter would act on an invisible highlight. This fix ensures that both cases where the highlight is preserved apply the visual CSS class: 1. When a previously highlighted option still exists in the filtered list 2. When the current highlight is a selected option (in multiple mode) Both calls use 'mouse' as the reason to apply visual styling without triggering automatic scroll logic.
taralshah09
force-pushed
the
fix/autocomplete-visual-highlight-reopen
branch
from
d14f3d7 to
2bc8e91
Compare
…le mode - Fix syncHighlightedIndex to trigger on popupOpen regardless of disableCloseOnSelect - Add check to prevent restoring previously highlighted option when popup was closed - Ensures first selected item is highlighted when reopening popup with multiple selections
revert useEffect condition - Fix TypeError on first render: previousProps.filteredOptions is undefined - Revert useEffect trigger to original condition to prevent scroll/highlight resets
zannager
added
the
scope: autocomplete
mj12albert
reviewed
Apr 10, 2026
| const previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex(); | ||
| if (previousHighlightedOptionIndex !== -1) { | ||
| highlightedIndexRef.current = previousHighlightedOptionIndex; | ||
| setHighlightedIndex({ index: previousHighlightedOptionIndex }); |
Member
There was a problem hiding this comment.
This breaks scroll preservation
Refer to these comments in the code below:
// Restore the focus to the previous index.
// Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position
|
|
||
| if ( | ||
| highlightedIndexRef.current !== -1 && | ||
| previousProps.filteredOptions?.length > 0 && |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #48177
Problem
When reopening the popup in multiple-values mode, the internal highlighted option reference was preserved but the visual CSS class (
Mui-focused) was not applied. This created a state mismatch where:Root Cause
The
syncHighlightedIndex()function inuseAutocomplete.jswas updating only the internal ref (highlightedIndexRef.current) when a previously highlighted option was found, but returned early without callingsetHighlightedIndex(). ThesetHighlightedIndex()function is responsible for applying the visual CSS class and synchronizing the DOM.Solution
Changed the early return path to call
setHighlightedIndex()instead of directly updating the ref, ensuring both internal state and visual styling are synchronized when restoring a previously highlighted option on popup reopen.Manual Testing Steps
Test Scenario: Multiple values mode popup reopen highlight restoration
Mui-focusedclassVerification
bandicam.2026-04-09.00-39-54-325.mp4