[Autocomplete] Clicking on the GitHub input's demo is closing the popup

[AxelLatour]

When using the Autocomplete component with custom template (like the GitHub Autocomplete in the Material-UI documentation), when the Popper is opened, the input is empty. Clicking on the empty input is closing the Popper instead of just getting the focus.

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

When using the Autocomplete inside a Popper, when the input is empty, clicking on it closes the Popper.

Expected Behavior 🤔

When using the Autocomplete inside a Popper, if the input is empty, clicking on it shouldn't close the Popper. It should just get the focus on the input. Even with autoFocus activated on the Input, users still try to click in the input before typing.

Steps to Reproduce 🕹

Steps:

1. Go to https://material-ui.com/components/autocomplete/#customized-autocomplete
2. Open the Popper by clicking on the "Settings" icon
3. Click on the input (which is empty by default)
4. Popper is closed

Your Environment 🌎

You can reproduce this case directly on the Material-UI documentation

[oliviertassinari]

@latoura Thanks for reporting this regression.

[Julien-Hery]

@oliviertassinari After some investigations I don't think it's a regression.

This behavior comes from the fact that the Customized Autocomplete example creates a function called handleClose which will clear anchorEl used by the Popper.

In most of the examples the Autocomplete component may have an Indicator (the little arrow at the end of the input) to tell if the option list is shown or not. If you click on this arrow it will toggle the option list. If you click on the input the option list is also toggled thanks to the same method. Obviously when the list is closed the onClose callback is called. In our case it clears the anchorEl and the Popper disappears.

We can fix this behavior by just renaming handleClose -> handleBlur and use this function in the onBlur of the input. In this situation it will not close the Popper when we click on the input.

Do you want me to make a PR to have a working example ?
 
 
I also noticed that this example (with or without fix) doesn't work with the prop blurOnSelect set to true. Do you want me to create another issue ?

[oliviertassinari]

@Julien-Hery Thanks for the analysis of the problem. I think that this should be our baseline expectation: https://v4-5-2.material-ui.com/components/autocomplete/#customized-autocomplete.

The problem I envision the onBlur approach is that it doesn't handle the Escape key. What do you think of this alternative: we introduce a reason argument? So we can filter the event, something in this order?

diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
index 40e96300c..493767189 100644
--- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx
+++ b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
@@ -130,7 +130,11 @@ export default function GitHubLabel() {
     setAnchorEl(event.currentTarget);
   };

-  const handleClose = () => {
+  const handleClose = (_, reason) => {
+    if (reason === 'toggleInput') {
+      return;
+    }
+
     setValue(pendingValue);
     if (anchorEl) {
       anchorEl.focus();

[Julien-Hery]

@oliviertassinari Yes the 4.5.2 version is working as expected.

I didn't thought about the escape key, good catch. The reason solution looks great. I don't have time right now to implement it. If @hasanozacar PR doesn't close the issue in the near future, I will try to take a look :)