Repository: mui/material-ui (TypeScript)
Date: 2019-11-15 08:58:40+00:00
Task type: Bug Fix

Issue:
Autocomplete disableOpenOnFocus not working
Summary: Autocomplete disableOpenOnFocus not working
"4.0.0-alpha.32"

[X] The issue is present in the latest release.
[X] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯
onOpen is called when disableOpenOnFocus

## Expected Behavior 🤔
onOpen callback should not be called when disableOpenOnFocus

## Steps to Reproduce 🕹
It works in the previous build "4.0.0-alpha.31"
It is not working here:  https://material-ui.com/components/autocomplete/



Issue discussion:
@jcmoore0 Thank you for reporting this regression. It's a good signal for us that it's time to add a regression test for it. What do you think of this diff?

```diff
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index dda61b78c..50973b7da 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -678,9 +678,9 @@ export default function useAutocomplete(props) {
     firstFocus.current = false;
   };

-  const handleInputMouseDown = () => {
-    if (inputValue === '') {
-      handlePopupIndicator();
+  const handleInputMouseDown = event => {
+    if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === document.activeElement)) {
+      handlePopupIndicator(event);
     }
   };
```

Do you want to work on it? :)
Hi @oliviertassinari  -  I few thoughts/suggestions:

1. use onFocus on the input to handleFocus
    handleFocus always opens (unless disableOpenOnFocus )
   
2. remove mouseDown on input 
    keep the onFocus/ handleOpen in one place
    it's too difficult for mouseDown to determine what to do in so many cases
    onClick on the popupIndicator should toggle the open/close to
    allow the user to close the popup with the input still focused if wanted
    
3. remove all inputValue === ' ' 
    the input can be anything and this keeps the implementation less heavy so the developers can do what they want

I wish I had time to work on it :)  I really like this control.
Let me know if this makes sense.
Best regards,
John
   


 
      






I would like to work on this.

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
@@ -672,15 +672,16 @@ export default function useAutocomplete(props) {
       firstFocus.current &&
       inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
     ) {
+      inputRef.current.focus();
       inputRef.current.select();
     }
 
     firstFocus.current = false;
   };
 
-  const handleInputMouseDown = () => {
-    if (inputValue === '') {
-      handlePopupIndicator();
+  const handleInputMouseDown = event => {
+    if (inputValue === '' && (!disableOpenOnFocus || inputRef.current === document.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
@@ -294,6 +294,40 @@ describe('<Autocomplete />', () => {
     });
   });
 
+  describe('prop: disableOpenOnFocus', () => {
+    it('disables open on input focus', () => {
+      const { getByRole } = render(
+        <Autocomplete
+          options={['one', 'two', 'three']}
+          disableOpenOnFocus
+          renderInput={params => <TextField autoFocus {...params} />}
+        />,
+      );
+      const textbox = getByRole('textbox');
+      const combobox = getByRole('combobox');
+
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      expect(textbox).to.have.focus;
+
+      fireEvent.mouseDown(textbox);
+      fireEvent.click(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+
+      document.activeElement.blur();
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      expect(textbox).to.not.have.focus;
+
+      fireEvent.mouseDown(textbox);
+      fireEvent.click(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'false');
+      expect(textbox).to.have.focus;
+
+      fireEvent.mouseDown(textbox);
+      fireEvent.click(textbox);
+      expect(combobox).to.have.attribute('aria-expanded', 'true');
+    });
+  });
+
   describe('wrapping behavior', () => {
     it('wraps around when navigating the list by default', () => {
       const { getAllByRole, getByRole } = render(