Select component with an empty value causes the associated InputLabel to not shrink properly.

[iamkobold]

A Select component that makes use of the InputLabel and the showEmpty attribute doesn't properly shrink when a SelectItem is selected with an value of "". So the InputLabel and display label of the select item overlap unexpectedly.

The demonstrations of the Select component at https://material-ui.com/demos/selects/ have a placeholder example without an InputLabel I am not sure if this deliberate or just an oversight. The other examples use the InputLabel

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

Expected Behavior

With empty values; the input label should shrink/grow correctly like other non-empty values. This should be true especially if the Select has showEmpty to true. I could see this being an issue with it being false; however the Select is being told to display an empty value. It's also not obvious how or when the shrink property changes as in my code it's never set; it just happens. So that tells me the Select component is doing it or the FormControl is doing it.

Current Behavior

When an empty value is selected in a Select component the input label and selected value overlap each other due the the auto-magic shrink attribute (from what i can tell) not being set as an empty value make it's act like a placeholder in the demos.

Steps to Reproduce

Link: https://codesandbox.io/s/53j9k0j91n

1. Create a FormControl wrapper component
2. Create a simple InputLabel inside the FormControl
3. Add a Select component with displayEmpty to true and a value of ""
4. Add a MenuItem with a value of ""
5. Add 1 or more MenuItem components with non-blank values

Context

I have developed a more general use component for creating consistent look and behaviors and this component was more or less a FormControl component like what's in the sandbox. I pretty much have now set the shrink property on the InputLabel to always be true now because that ensures the label never overlaps; however the component looses the "placeholder" effect the InputLabel does when there no value selected.

Your Environment

Tech	Version
Material-UI	v1.3.0
React	16.4.1
browser	N/A
etc.

[oliviertassinari]

@iamkobold I believe it's a duplicate of #12336.