[Autocomplete] With `autoComplete` + `autoHighlight` the highlighted option should appears inline

Hi,there. I’m not sure this is a bug or feature. When <Autocomplete autoComplete autoHighlight />, the first option not appears inline after the input cursor immediately. It work as expected when selection move up/down.

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

If this is a bug, the default highlighted option NOT inline after the input cursor immediately when autoHighlight is on.

Expected Behavior 🤔

If this is a bug, the default highlighted option should inline after the input cursor immediately when autoHighlight is on.

Steps to Reproduce 🕹

Steps:

1. https://codesandbox.io/s/material-demo-forked-pifom
2. type a
3. the input should be become Andorra

[morijenab]

can I work on this?

[oliviertassinari]

This one should work better:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index a9d8d48de3..a9dc88789d 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -15,6 +15,20 @@ function stripDiacritics(string) {
     : string;
 }

+function usePrevious(value) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = React.useRef();
+
+  // Store current value in ref
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+  return ref.current;
+}
+
 export function createFilterOptions(config = {}) {
   const {
     ignoreAccents = true,
@@ -829,6 +843,29 @@ export default function useAutocomplete(props) {
     }
   };

+  const prevInputValue = usePrevious(inputValue);
+
+  React.useEffect(() => {
+    if (
+      autoComplete &&
+      prevInputValue !== undefined &&
+      inputValue.length > prevInputValue.length &&
+      filteredOptions[highlightedIndexRef.current]
+    ) {
+      const option = getOptionLabel(filteredOptions[highlightedIndexRef.current]);
+
+      // The portion of the selected suggestion that has not been typed by the user,
+      // a completion string, appears inline after the input cursor in the textbox.
+      const index = option.toLowerCase().indexOf(inputValue.toLowerCase());
+      if (index === 0 && inputValue.length > 0) {
+        setTimeout(() => {
+          inputRef.current.value = option;
+          inputRef.current.setSelectionRange(inputValue.length, option.length);
+        });
+      }
+    }
+  }, [prevInputValue, inputValue, filteredOptions, autoComplete, getOptionLabel]);
+
   const handleOptionMouseOver = (event) => {
     setHighlightedIndex({
       event,

It reproduces how Chrome URL bar behaves. It was pretty hard to figure out! If somebody could confirm that it’s the expected behavior, it would be great, we would also need to add test cases.