[Autocomplete] autoHighlight not working properly for asynchronous requests

• 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 😯

When typing a query into an asynchronous Autocomplete before the request finishes loading, Autocomplete with autoHighlight set to true does not highlight the first option. Only after pressing another key do first options get highlighted as they should. Everything then works as expected until the user clears the textfield and starts over.

Expected Behavior 🤔

The first option should be selected when the request finishes loading.

Steps to Reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/material-demo-ycmz7?file=/demo.tsx
2. Click on the textfield and quickly type a letter such as “a” before the request finishes loading
3. You will see that “Portugal” is not selected even though autoHighlight is on
4. Type another letter and you’ll see that first options are selected as they should
5. Delete (backspace) the input and type another letter and you see that everything works as it should
6. Leave the textfield by clicking away or hitting escape. When you start at step 2 you’ll see the bug again.

Your Environment 🌎

I just upgraded from v4.0.0-alpha.50 where this bug did not yet exist. So something must have changed in the recent merges.

Tech	Version
Material-UI Lab	v4.0.0-alpha.53
React	16.13.1
Browser	Chrome
TypeScript	3.9.2

[marcosvega91]

I leave the resolution to @mstykow that has discovered the bug, otherwise I can do it. It’s ok for your resolution but I think that in both cases a test case is needed 😄

[mstykow]

Nice. Maybe one more improvement simplifying your if statement:

if (!loading && filteredOptions.length) {