Repository: mui/material-ui (TypeScript)
Date: 2020-02-21 09:58:34+00:00
Task type: Bug Fix

Issue:
[Autocomplete] Drop list no close outline mouse

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.9.3  |
| React       |   v16.12.0      |
| Browser     |     Chrome   |
| TypeScript  |         |
| etc.        |         |

Hi, please, look at the gif with the problem
![1](https://user-images.githubusercontent.com/11176223/74817353-cef40400-530d-11ea-83b8-2fc6bdfa0cc8.gif)




Issue discussion:
Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. [This **codesandbox.io** template](https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) _may_ be a good starting point. Thank you!

Solution patch:
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-constant-condition */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { setRef, useEventCallback, useControlled } from '@material-ui/core/utils';
+import { setRef, useEventCallback, useControlled, ownerDocument } from '@material-ui/core/utils';
 
 // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
 // Give up on IE 11 support for this feature
@@ -767,24 +767,24 @@ export default function useAutocomplete(props) {
     }
   };
 
-  // Focus the input when first interacting with the combobox
+  // Focus the input when interacting with the combobox
   const handleClick = () => {
+    inputRef.current.focus();
+
     if (
+      selectOnFocus &&
       firstFocus.current &&
       inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
     ) {
-      inputRef.current.focus();
-
-      if (selectOnFocus) {
-        inputRef.current.select();
-      }
+      inputRef.current.select();
     }
 
     firstFocus.current = false;
   };
 
   const handleInputMouseDown = event => {
-    if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === document.activeElement)) {
+    const doc = ownerDocument(inputRef.current);
+    if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === doc.activeElement)) {
       handlePopupIndicator(event);
     }
   };


Test patch:
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -913,6 +913,25 @@ describe('<Autocomplete />', () => {
       expect(textbox.selectionStart).to.equal(0);
       expect(textbox.selectionEnd).to.equal(3);
     });
+
+    it('should focus the input when clicking on the open action', () => {
+      const { getByRole, queryByTitle } = render(
+        <Autocomplete
+          {...defaultProps}
+          value="one"
+          options={['one', 'two']}
+          renderInput={params => <TextField {...params} />}
+        />,
+      );
+
+      const textbox = getByRole('textbox');
+      fireEvent.click(textbox);
+      expect(textbox).to.have.focus;
+      textbox.blur();
+
+      fireEvent.click(queryByTitle('Open'));
+      expect(textbox).to.have.focus;
+    });
   });
 
   describe('controlled', () => {
@@ -1141,8 +1160,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(firstOption);
       expect(textbox).to.not.have.focus;
 
-      const opener = queryByTitle('Open');
-      fireEvent.click(opener);
+      fireEvent.click(queryByTitle('Open'));
       expect(textbox).to.have.focus;
       firstOption = getByRole('option');
       fireEvent.touchStart(firstOption);
@@ -1166,8 +1184,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(firstOption);
       expect(textbox).to.have.focus;
 
-      const opener = queryByTitle('Open');
-      fireEvent.click(opener);
+      fireEvent.click(queryByTitle('Open'));
       firstOption = getByRole('option');
       fireEvent.touchStart(firstOption);
       fireEvent.click(firstOption);
@@ -1191,8 +1208,7 @@ describe('<Autocomplete />', () => {
       fireEvent.click(firstOption);
       expect(textbox).to.have.focus;
 
-      const opener = queryByTitle('Open');
-      fireEvent.click(opener);
+      fireEvent.click(queryByTitle('Open'));
       firstOption = getByRole('option');
       fireEvent.click(firstOption);
       expect(textbox).to.not.have.focus;