Material-ui: [Autocomplete] disableCloseOnSelect + selecting using mouse = crash

[TomasB]

The scenario is pretty common, in case a user tries to select multiple items in a dropdown list using a mouse.

Based on the official demo:
https://codesandbox.io/s/material-demo-2c4ph

Using a mouse:

• expand dropdown
• select an item (still ok)
• without moving a mouse click on another item (crashes)

Works if the mouse pointer is moved, and the item is selected before clicking on it.

[oliviertassinari]

@TomasB Nice! We haven't seen a crash for quite some time. The problem is that we reset the highlightedIndex to -1 after the filter listed of options changes. However, if we don't move the mouse, not mouseover event is triggered, we can't rely on the ref value.

What do you think of this diff?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 2bdc11a27..eb3a12168 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -630,7 +630,8 @@ export default function useAutocomplete(props) {
   };

   const handleOptionClick = event => {
-    selectNewValue(event, filteredOptions[highlightedIndexRef.current]);
+    const index = Number(event.currentTarget.getAttribute('data-option-index'));
+    selectNewValue(event, filteredOptions[index]);
   };

   const handleTagDelete = index => event => {
@@ -762,6 +763,12 @@ export default function useAutocomplete(props) {
         // Prevent blur
         event.preventDefault();
       },

Do you want to work on it (we would need a test) :)?

[weslenng]

I will work on it :)

[oliviertassinari]

@weslenng We should be able to add a test case for this one.