Options in Autocomplete lose the last focus after component is rerendered

[VadimZvf]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/5gc5pj
2. Set focus to the text input
3. Press "ArrowDown" key so the first option is highlighted
4. Press "Enter" key
5. Press "ArrowDown" three times, so the "Focus on me now, and try to select too" option is highlighted
6. Press "Enter" key
7. Press "ArrowDown"

Current behavior

The focus goes to the first option

Expected behavior

The next "Then try to focus on me" option is highlighted

Context

The example code looks strange, because we manually trigger rerenders.
However, this rerender could be triggered by an async action at the parent component.

I think the problem is easier to understand if we look at its test case 👇

    it('should keep focus when component is re-rendered', () => {
      const onChange = spy();

      function TestComponent(props) {
        return (
          <Autocomplete
            open
            multiple
            value={[]}
            options={props.options}
            renderInput={(params) => <TextField {...params} autoFocus />}
            onChange={onChange}
          />
        );
      }

      const view = render(<TestComponent options={['one', 'two']} />);

      const textbox = screen.getByRole('combobox');
      const listbox = screen.getByRole('listbox');

      // highlight 'two'
      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
      checkHighlightIs(listbox, 'two');

      // the highlighted option should be the same even if the options are updated
      view.rerender(<TestComponent options={['one', 'two', 'three', 'four', 'five']} />);
      checkHighlightIs(listbox, 'two');

      // highlight 'four'
      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
      checkHighlightIs(listbox, 'four');

      // re-rendering the component should not change the highlighted option
      view.rerender(<TestComponent options={['one', 'two', 'three', 'four', 'five']} />);

      // highlight 'five'
      fireEvent.keyDown(textbox, { key: 'ArrowDown' });
      checkHighlightIs(listbox, 'five'); // Test fails here, the focus goes to the first option
    });

Your environment

We only need the latest @mui/material package

Search keywords: focus, Autocomplete, highlight

[VadimZvf]

I found the problem. It's in the getPreviousHighlightedOptionIndex function 👇

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

Lines 510 to 514 in b4a84d8

	!areArraysSame({
	array1: previousProps.filteredOptions,
	array2: filteredOptions,
	parser: getOptionLabel,
	}) &&

This function always has a reference to the previous list of options :(

I can try to fix it if you don't mind

[VadimZvf]

Here's my attempt to fix the problem :)

#48094

[silviuaavram]

Hi! It won't find the highlighted item in the previous items list, because it wasn't there.

      const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];

And it won't be able to tell what to highlight if your value is controlled to null. For this reason I believe the example does not warrant any code change.

[VadimZvf]

Hi! It won't find the highlighted item in the previous items list, because it wasn't there.

      const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];

Yes, you're right. Autocomplete doesn't see option because it has "outdated" reference to previous filtered options. :(

And it won't be able to tell what to highlight if your value is controlled to null. For this reason I believe the example does not warrant any code change.

The component still looses its focus even if I simplify my example and if I remove value prop. :(
I updated example on codesandbox 👉 https://codesandbox.io/p/sandbox/5gc5pj

Screen.Recording.2026-04-07.at.16.53.35.mov

My understanding is that we have a reference to an outdated list of options because of this line:

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

Line 593 in fcddb09

filteredOptions.length,

We update the sync callback only when the number of options changes.

In my proposed PR I keep reference to the previous options inside a ref, so we are sure that the reference is up to date.