[Autocomplete] Fix multiselect regression

mui · Mar 28, 2020 · 47a106d · 47a106d
1 parent e9fbcbf
commit 47a106d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -77,7 +77,7 @@ describe('<Autocomplete />', () => {
       checkHighlightIs('one');
     });
 
-    it('should set the focus on selected item when dropdown is expanded', () => {
+    it('should set the highlight on selected item when dropdown is expanded', () => {
       const { getByRole, setProps } = render(
         <Autocomplete
           {...defaultProps}
@@ -95,6 +95,29 @@ describe('<Autocomplete />', () => {
       setProps({ value: 'two' });
       checkHighlightIs('two');
     });
+
+    it('should keep the current highlight if possible', () => {
+      const { getByRole } = render(
+        <Autocomplete
+          {...defaultProps}
+          multiple
+          defaultValue={["one"]}
+          options={['one', 'two', 'three']}
+          disableCloseOnSelect
+          renderInput={(params) => <TextField autoFocus {...params} />}
+        />,
+      );
+
+      function checkHighlightIs(expected) {
+        expect(getByRole('listbox').querySelector('li[data-focus]')).to.have.text(expected);
+      }
+
+      checkHighlightIs('one');
+      fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
+      checkHighlightIs('two');
+      fireEvent.keyDown(document.activeElement, { key: 'Enter' });
+      checkHighlightIs('two');
+    });
   });
 
   describe('prop: limitTags', () => {

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -416,6 +416,17 @@ export default function useAutocomplete(props) {
 
     // Synchronize the value with the highlighted index
     if (!filterSelectedOptions && valueItem != null) {
+      const currentOption = filteredOptions[highlightedIndexRef.current];
+
+      // Keep the current highlighted index if possible
+      if (
+        multiple &&
+        currentOption &&
+        findIndex(value, (val) => getOptionSelected(currentOption, val)) !== -1
+      ) {
+        return;
+      }
+
       const itemIndex = findIndex(filteredOptions, (optionItem) =>
         getOptionSelected(optionItem, valueItem),
       );