[Autocomplete] Fix blurOnSelect consistency for keyboard (#20314)

Author: alexbarkin

docs/src/pages/components/autocomplete/Playground.js

@@ -108,6 +108,12 @@ export default function Playground() {
         disablePortal
         renderInput={(params) => <TextField {...params} label="disablePortal" margin="normal" />}
       />
+      <Autocomplete
+        {...defaultProps}
+        id="blur-on-select"
+        blurOnSelect
+        renderInput={(params) => <TextField {...params} label="blurOnSelect" margin="normal" />}
+      />
     </div>
   );
 }

docs/src/pages/components/autocomplete/Playground.tsx

@@ -106,6 +106,12 @@ export default function Playground() {
         disablePortal
         renderInput={(params) => <TextField {...params} label="disablePortal" margin="normal" />}
       />
+      <Autocomplete
+        {...defaultProps}
+        id="blur-on-select"
+        blurOnSelect
+        renderInput={(params) => <TextField {...params} label="blurOnSelect" margin="normal" />}
+      />
     </div>
   );
 }

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -490,6 +490,8 @@ export default function useAutocomplete(props) {
     setValue(newValue);
   };
 
+  const isTouch = React.useRef(false);
+
   const selectNewValue = (event, option, reasonProp = 'select-option', origin = 'options') => {
     let reason = reasonProp;
     let newValue = option;
@@ -526,6 +528,14 @@ export default function useAutocomplete(props) {
     if (!disableCloseOnSelect) {
       handleClose(event, reason);
     }
+
+    if (
+      blurOnSelect === true ||
+      (blurOnSelect === 'touch' && isTouch.current) ||
+      (blurOnSelect === 'mouse' && !isTouch.current)
+    ) {
+      inputRef.current.blur();
+    }
   };
 
   function validTagIndex(index, direction) {
@@ -780,8 +790,6 @@ export default function useAutocomplete(props) {
     setHighlightedIndex(index, 'mouse');
   };
 
-  const isTouch = React.useRef(false);
-
   const handleOptionTouchStart = () => {
     isTouch.current = true;
   };
@@ -790,14 +798,6 @@ export default function useAutocomplete(props) {
     const index = Number(event.currentTarget.getAttribute('data-option-index'));
     selectNewValue(event, filteredOptions[index], 'select-option');
 
-    if (
-      blurOnSelect === true ||
-      (blurOnSelect === 'touch' && isTouch.current) ||
-      (blurOnSelect === 'mouse' && !isTouch.current)
-    ) {
-      inputRef.current.blur();
-    }
-
     isTouch.current = false;
   };