Select doesn't lose focus if element is deleted from inside its input.

[maximovicd]

• I have searched the issues of this repository and believe that this is not a duplicate.
• The issue is present in the latest release.

Current Behavior 😯

If there is a Chip with a delete button displayed in the Input of Select component. When the delete button is clicked, the Select remains focused.

Expected Behavior 🤔

Select should lose focus or lose it after clicking outside of it again.

Steps to Reproduce 🕹

https://codesandbox.io/s/gracious-morning-ow6nn - edited

Steps:

1. Click (in this case) the "Two" Chip's X button
2. The Select will remain focused without possibility to click away from it to blur it.
3. This can be viewed by clicking inside an input next to the Select.

Context 🔦

Think this is a fairly common use case.

Your Environment 🌎

Tech	Version
Material-UI	v4.6.1
React	16.8.6
Browser	Chrome

[oliviertassinari]

Why should it behave this way?

[oliviertassinari]

Having a closer look, I don't think that the element should lose focus by default. You can blur the element if it better suite your use case.

[maximovicd]

@oliviertassinari Thanks for your quick answer. I am sorry, but you are able to make the Select lose focus at all? For me it stays focused - if there is a second input, it will get focused but Select remains colored as if focus is within it. I have edited the sandbox and steps to repro.

[oliviertassinari]

@maximovicd Thanks for the updated codesandbox. It's better, we can clearly see the problem. I fear we can't do anything about it. You can work around the issue by focusing the select input back when you delete a tag. But in any case, it's not supported. You might prefer the autocomplete component for this use case.

[oliviertassinari]

Actually, deletable chips are likely to be "impossible" to make work once we move #17978 forward.

[maximovicd]

Thanks a lot, refocusing after delete works good as a workaround!

[oliviertassinari]

@maximovicd I would advise finding another way, it's not supported. Your workaround won't be working in the next release after #17978, you will have to further customize the integration (control the open prop and delay the interaction).

[emlai]

This is still an issue in the latest version.