[autocomplete] unexpectly changes field value on mouse hover (original) (raw)

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.

Current Behavior 😯

The problem is illustrated in this sandbox: https://codesandbox.io/s/trusting-dewdney-cvj7ss?file=/src/App.js

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