From 47a106d07ffa214032b82a17e0383226e4983031 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 29 Mar 2020 00:36:42 +0100
Subject: [PATCH] [Autocomplete] Fix multiselect regression

---
 .../src/Autocomplete/Autocomplete.test.js     | 25 ++++++++++++++++++-
 .../src/useAutocomplete/useAutocomplete.js    | 11 ++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index 5e6c6054d6f486..f925ae81799d62 100644
--- 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
index 5e058d12693643..23a59914b57c94 100644
--- 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),
       );