[Autocomplete] On mobile selecting option keeps keyboard open

[scott-mcnulty]

When using the autocomplete input on mobile the keyboard doesn't disappear after selecting an item from the dropdown list. Even when selecting an item and seeing it populate the input then clicking the enter key on the keyboard is still there.

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

Keyboard doesn't disappear on mobile when selecting something from the autocomplete input.

Expected Behavior 🤔

After typing and selecting a match in the list the keyboard should disappear.

Steps to Reproduce 🕹

Steps:

1. Go to material-ui.com on mobile
2. Select an autocomplete input and start typing
3. Click item from list of matches

Context 🔦

I'm making a progressive web app and would like to stay within the material ui component library instead of moving to use react-select or downshift for autocomplete search

Your Environment 🌎

Tech	Version
Material-UI (lab)	v4.0.0-alpha.35
Browser	Chrome 78.0.3904.108
OS	Android 9

[m4theushw]

@oliviertassinari On desktop as well as mobile, the underlying <TextField /> keeps focused after an option is selected. Is this not the normal behaviour?

[oliviertassinari]

@scott-mcnulty I have wondered about this point during the initial implementation of the component. Keeping the focus was done on purpose to be closer to a regular input experience and not to interrupt the experience when working on a multi-select input.

downshift

I believe you would have to implement the logic on your own going with this solution. The solution would be almost identical to what you would need to write to add such support to the Autocomplete.

react-select

If you have a desktop with a touch screen, it will blur the input, even if you have used your mouse or keyboard to select the value ❌.

---

I think that we can add an opt-in prop for such behavior (default false):

blurOnSelect?: false | true | 'touch' | 'pointer';

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 38f9ee430..6722376bd 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -71,6 +71,7 @@ export default function useAutocomplete(props) {
     autoComplete = false,
     autoHighlight = false,
     autoSelect = false,
+    blurOnSelect = 'touch',
     clearOnEscape = false,
     debug = false,
     defaultValue,
@@ -91,8 +92,8 @@ export default function useAutocomplete(props) {
     multiple = false,
     onChange,
     onClose,
-    onOpen,
     onInputChange,
+    onOpen,
     open: openProp,
     options = [],
     value: valueProp,
@@ -666,9 +667,25 @@ export default function useAutocomplete(props) {
     setHighlightedIndex(index, 'mouse');
   };

+  const isTouch = React.useRef(false);
+
+  const handleOptionTouchStart = () => {
+    isTouch.current = true;
+  };
+
   const handleOptionClick = event => {
     const index = Number(event.currentTarget.getAttribute('data-option-index'));
     selectNewValue(event, filteredOptions[index]);
+
+    if (
+      blurOnSelect === true ||
+      (blurOnSelect === 'touch' && isTouch.current) ||
+      (blurOnSelect === 'pointer' && !isTouch.current)
+    ) {
+      inputRef.current.blur();
+    }
+
+    isTouch.current = false;
   };

   const handleTagDelete = index => event => {
@@ -814,6 +831,7 @@ export default function useAutocomplete(props) {
         id: `${id}-option-${index}`,
         onMouseOver: handleOptionMouseOver,
         onClick: handleOptionClick,
+        onTouchStart: handleOptionTouchStart,
         'data-option-index': index,
         'aria-disabled': disabled,
         'aria-selected': selected,

What do you think of this diff? Do you want to work on a pull request?

[m4theushw]

@scott-mcnulty If you don't mind I could work on this issue.

[oliviertassinari]

@m4theushw Ok, this sounds good, but let's wait @scott-mcnulty's perspective on the matter first :).

[scott-mcnulty]

I like the idea of the blurOnSelect prop you suggested @oliviertassinari -- seems like a good way to go

@m4theushw If you'd like to work on this be my guest 🙂

Thank you guys for your help!