javascript - Meterial-UI [Select] - How to remove focus when clicked outside? - Stack Overflow

admin管理员组

文章数量:1389750

I'm trying to make a simple multiple select using Material-UI's Select ponent. But one thing that I did not like is that if you unselect anything or just don't select anything and click outside, the dropdown disappears but the label remains focused until you click again or focus on other ponent.

Any solution?

I want to remove focus from the label/select ponent when the menu disappears.

Link to ponent: /

I'm trying to make a simple multiple select using Material-UI's Select ponent. But one thing that I did not like is that if you unselect anything or just don't select anything and click outside, the dropdown disappears but the label remains focused until you click again or focus on other ponent.

Any solution?

I want to remove focus from the label/select ponent when the menu disappears.

Link to ponent: https://material-ui./demos/selects/

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow asked Jun 17, 2018 at 12:49 FaheemFaheem 1,1761111 silver badges2929 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Although this is not exactly what You are looking for there is important reason why those fields are kept focused (despite of being too much visibly outlined) and it is a11y.

---

Thanks to keeping focus on <select> element we are allowed to reselect once selected value eg. by only keyboard (this covers case when you selected bad option unintentionally and want to easily e to the select list back or - like in Yours - easily select again if under any situation we wanted it but we closed the list before it happend).

One important thing is that the MD's <select>'s focus behaviour does not differ from the way native select does it:

And generally should not be changed outlinenone. without having critical reason.

本文标签： javascriptMeterialUI SelectHow to remove focus when clicked outsideStack Overflow