Material-ui: [Select] Bug w/ label and multiple select field

[kulikovviktor]

Fresh problem with last beta 26 in Select component. See steps for reproduce.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

On blur event the label MUST be moved above the field.

Current Behavior

On blur event the label return back to select field and mixed w/ selected items context

onFocus

onBlur

Absolutely the same problem on your demo site https://material-ui-next.com/demos/selects/#multiple-select

Steps to Reproduce (for bugs)

1. Going to https://material-ui-next.com/demos/selects/#multiple-select
2. Select some items in multiple select example
3. Click on any space on page
4. See how label mixed with selected variants on field

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI |1.0.0-beta.26|
| React |15.6.2|
| browser |Chrome 63.0.3239.84 for Mac|

[oliviertassinari]

Fixed in #9570

[kulikovviktor]

@oliviertassinari thanks a lot. Can you say when this fix will be released ?

[oliviertassinari]

You can rollback or wait for the next release next week.

[danorlando]

Why is this closed? I'm using beta 33 and the problem still exists.

[usman-coe]

I'm using beta 38, it still bug

[oliviertassinari]

@usman-coe Do you have a reproduction example?

[usman-coe]

In my case, this bug occurs when I set the default value of select with null
example https://codesandbox.io/s/x7my6joroq
But when I change the default value of select to '' this bug is gone
example https://codesandbox.io/s/zrz32o01o3

[oliviertassinari]

@usman-coe Thanks for the feedback. The behavior you are describing is the expected behavior. You need to control the component. You might have missed the warning in the console:

I have worked on #10860 so the component fails fast:

[Alebron23]

I'm still experiencing this issue. It only happens the first time the select appears on the page. And I mean the very first. If I close the window or restart the server it doesn't do it anymore. And I don't know how to recreate the issue after that.

[oliviertassinari]

@Alebron23 If you can manage to create a minimal reproduction example, we would be happy to have a lookt at it.

[Alebron23]

I think I fixed it. I was using a selector with reselect for my redux store that was passing in undefined to the value prop on the Select component and it was complaining about switching from a controlled to uncontrolled component. Once I changed it to pass in an empty string instead it stopped doing it.

[Alebron23]

@oliviertassinari But thanks for the quick reply.

[oliviertassinari]

@Alebron23 Fixing this React warning ("from a controlled to uncontrolled component") can only help :).

[giancarlobianchi12]

In my case, this bug occurs when I set the default value of select with null
example https://codesandbox.io/s/x7my6joroq
But when I change the default value of select to '' this bug is gone
example https://codesandbox.io/s/zrz32o01o3

Same problem ! Thank you