Material-ui: [Autocomplete] onChange undefined intermittently when options updated

[jellyedwards]

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

Current Behavior 😯

Autocomplete sometimes returns undefined as the value in onChange when selecting options from a list that updates (the option is present in both previous and current list).

Expected Behavior 🤔

Autocomplete should select the selected item.

Steps to Reproduce 🕹

Here's a codesandbox.io reproduction: https://codesandbox.io/s/autocomplete-and-async-suggestions-rrp70

Steps:

1. Select 1 from the drop down (an item gets added to the options every second):
   

2. Keep selecting 1:
   

3. Eventually, onChange will select undefined:
   

Context 🔦

I have a list of IoT devices and a autocomplete to select the IoT device by id say. As new IoT devices come online the list is updated asynchronously and device ids are added so there's no well-defined loading phase.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.6.1 (lab 4.0.0-alpha.32) |
| React | 16.12.0 |
| Browser | Chrome |
| TypeScript | No |

[Dror88]

Similar behaviour occurs when using the "multiple", "filterSelectedOptions", "disableCloseOnSelect" props together, and selecting multiple options without moving the mouse after selection.

codesandbox: https://codesandbox.io/s/material-demo-f5sfu

[oliviertassinari]

@jellyedwards @Dror88 The proposed fix in #18456 solves this problem.

---

However, it does surface another concerning problem: the keyboard navigation is fucked up (the focus is reset to the first index every second). It seems that the following would work better:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 12ca84907..fe7d5ac03 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -371,7 +371,7 @@ export default function useAutocomplete(props) {

   React.useEffect(() => {
     changeHighlightedIndex('reset', 'next');
-  }, [filteredOptions.length]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [inputValue]); // eslint-disable-line react-hooks/exhaustive-deps

   const handleOpen = event => {
     if (open) {

Do you confirm? Do you want to explore a pull request :)? Thanks

[jellyedwards]

Hey @oliviertassinari it looks like both of your fixes will sort it. I'll try to do a PR & add a test or two.

[jellyedwards]

Sorry forgot to say thanks! @oliviertassinari