Single-select autocomplete doesn't open on click after selecting option

[MargaretKrutikova]

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

I am using Autocomplete component with single-choice that closes on option select. When an option has been selected, it closes, but stays in focus which prevents it from opening when the user clicks on the input again.

Expected Behavior 🤔

After an option has been selected, autocomplete closes but reacts on click by showing the list of options again.

Steps to Reproduce 🕹

Can be reproduced on all examples of single-choice autocomplete without disableCloseOnSelect set to true. See https://material-ui.com/components/autocomplete/.

Steps:

1. Open an autocomplete by clicking on it
2. Select an option (autocomplete closes)
3. Click on the input field of the autocomplete
4. The list of options doesn't appear

Context 🔦

I have tried setting my own open state and trying to control it myself, but got issues with input focus and the component getting open and closed multiple times in a row.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.3
Material-UI lab	v4.0.0-alpha.47
React	v16.9.0
Browser	all
etc.

The autocomplete component is perfect for our application at work, unfortunately this issue is considered to be rather crucial, so I really appreciate any help on this!
Thanks in advance! 🙂

[MargaretKrutikova]

I thought I saw a comment here, but can't see it anymore. Have I missed something?

[marcosvega91]

I can work on it @oliviertassinari

EDIT

@oliviertassinari I look at the code and It seams a controlled behaviour.
When the input value is not empty the popup will not open.
Maeby I don't understand the issue

[oliviertassinari]

@MargaretKrutikova Yeah, sorry, we have had a regression since the first version of the component.

[MargaretKrutikova]

@oliviertassinari no worry! thanks a lot for looking into this 🙂

[MargaretKrutikova]

I really appreciate such a quick fix! However I have noticed that when there is an option selected and the list is open, you can't click on the input field to toggle open/close on it. Just received this comment from our testers. Any way this could be fixed?
Thanks! 🙂

[oliviertassinari]

@MargaretKrutikova I'm not sure we would want to address this in the core of the library, did you try to customize the behavior?

[MargaretKrutikova]

Yes, I will see if I can make it work for our case. Thanks!

[oliviertassinari]

Awesome. Let us know if there is something preventing to implement the behavior. My main concern against moving this logic in the core is about what happen with text selection? I have recently learned about getSelection().isCollapsed, so maybe it could be something to bring into the core after all but to be careful.

[oliviertassinari]

I have tried the idea I was suggesting above:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index b22099b2a..6eb66a7ae 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -861,7 +861,7 @@ export default function useAutocomplete(props) {
   };

   const handleInputMouseDown = (event) => {
-    if (inputValue === '' || !open) {
+    if (getSelection().isCollapsed) {
       handlePopupIndicator(event);
     }
   };

It doesn't feel like something we would want to push further. It feels off when the user tries to change the position of the caret or when he double click to select all. I don't know how we could handle these cases.