[Autocomplete] unexpectly changes field value on mouse hover

An Autocomplete component with freeSolo and autoSelect changes the field value by simply hovering the mouse over the dropdown menu and then bluring the field.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The problem is illustrated in this sandbox: https://codesandbox.io/s/thirsty-hodgkin-n1ype

In the first field, click the popup arrow icon to open the dropdown menu, then hover the mouse down such that menu items are successively highlighted. Continue to move mouse down outside of the menu area and click anywhere to blur the field.

The field value (and associated state) will be changed to the last menu item that was hovered (and highlighted).

Expected Behavior 🤔

As the user hasn’t made any selection in the dropdown menu, the field value shouldn’t change.

Context 🔦

The use case is to create a free text entry with a set of suggested values for quick entry.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.10
Material-UI lab	v4.0.0-alpha.49
React	16.12.0

[oliviertassinari]

@goffioul This is one of the reasons why this props combination isn’t used by default by the Autocomplete. However, I think that there is room for improvement here. What do you think of this patch?

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 3cb1ca0c5..4de19514a 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -790,6 +790,10 @@ export default function useAutocomplete(props) {
     setHighlightedIndex(index, 'mouse');
   };

+  const handleListboxMouseLeave = () => {
+    changeHighlightedIndex('reset', 'next');
+  };
+
   const handleOptionTouchStart = () => {
     isTouch.current = true;
   };
@@ -955,6 +959,7 @@ export default function useAutocomplete(props) {
         // Prevent blur
         event.preventDefault();
       },
+      onMouseLeave: handleListboxMouseLeave,
     }),
     getOptionProps: ({ index, option }) => {
       const selected = (multiple ? value : [value]).some(

[oliviertassinari]

@plamenkoyovchev https://github.com/mui-org/material-ui/issues/20602#issuecomment-615884379