Material-ui: [Autocomplete] Popup doesn't close upon clicking

[nayaksoumya56]

Steps to Reproduce the issue:

1. click on the component ( input field or down-arrow on the side ).
2. select a value.
3. click the arrow on the side again.
4. click outside anywhere.

Expected: dropdown should close
Output: It doesn't close.

YOU CAN TEST IT HERE: https://material-ui.com/components/autocomplete/

[oliviertassinari]

@nayaksoumya56 I can't reproduce. Do you have more details?

[zekehernandez]

@oliviertassinari, I can still reproduce this, both in the docs, and in my own app.
The issue is sometimes when you have an item selected and click the dropdown arrow, the Autocomplete doesn't gain focus, thus when you click off, the dropdown list doesn't close.

Here are my steps:

1. Go to Material-UI docs
2. Go to Autocomplete component
3. Select a value in the Combo Box section
4. Close the dropdown
5. Click the dropdown arrow
6. If the border is highlighted, click off the Autocomplete and try again
7. If the border is not highlighted, click off the Autocomplete
8. The listbox doesn't close

You can work around this by clicking one of the options or clicking the text in the input.

I was going to file a new issue, but I saw this one existed.

I'll attach a GIF

[gogevorgyan]

Hi, currently I'm facing this issue, any news on this?

[luketgriffith]

I am also experiencing this

[spatil77937]

I am also having same issue...I think it will work on material ui grid or material ui property only....Not on a html div

[spatil77937]

But not sure how can I fix this?

[oliviertassinari]

@zekehernandez For the GIF and the instructions to reproduce the issue, unfortunately, I can't reproduce :/.

[zekehernandez]

I can no longer reproduce it on the docs site whereas I was able to easily back when I first posted. I'll try using the latest version of the Autocomplete, maybe it was fixed? 🤷‍♂️