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

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

@@ -458,6 +458,42 @@ describe('<Autocomplete />', () => {
       });
       checkHighlightIs(screen.getByRole('listbox'), 'two');
     });
+
+    it('should restore visual highlight on selected option when reopening popup in multiple mode', () => {
+      const handleChange = spy();
+      render(
+        <Autocomplete
+          multiple
+          onChange={handleChange}
+          options={['one', 'two', 'three']}
+          defaultValue={['one', 'two']}
+          disableCloseOnSelect
+          renderInput={(params) => <TextField {...params} autoFocus />}
+        />,
+      );
+      const textbox = screen.getByRole('combobox');
+
+      // Open popup
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+      let listbox = screen.getByRole('listbox');
+      // With value=['one', 'two'], sync highlights 'one' (the first value item)
+      checkHighlightIs(listbox, 'one');
+
+      // Navigate down to 'two' (also selected)
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+      checkHighlightIs(listbox, 'two');
+
+      // Close popup by pressing Escape
+      fireEvent.keyDown(textbox, { key: 'Escape' });
+      expect(screen.queryByRole('listbox')).to.equal(null);
+
+      // Reopen popup - the highlight should be on a selected option
+      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
+      listbox = screen.getByRole('listbox');
+
+      // Should have visual focus on the first selected item (one) per sync logic
+      checkHighlightIs(listbox, 'one');
+    });
   });
 
   describe('prop: limitTags', () => {

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

@@ -507,6 +507,7 @@ function useAutocomplete(props) {
 
     if (
       highlightedIndexRef.current !== -1 &&
+      previousProps.filteredOptions?.length > 0 &&
       !areArraysSame({
         array1: previousProps.filteredOptions,
         array2: filteredOptions,
@@ -538,7 +539,7 @@ function useAutocomplete(props) {
     // 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) {
-      highlightedIndexRef.current = previousHighlightedOptionIndex;
+      setHighlightedIndex({ index: previousHighlightedOptionIndex });
       return;
     }
 
@@ -564,6 +565,7 @@ function useAutocomplete(props) {
         currentOption &&
         value.findIndex((val) => isOptionEqualToValue(currentOption, val)) !== -1
       ) {
+        setHighlightedIndex({ index: highlightedIndexRef.current });
         return;
       }