Material-ui: TextField with select: Label overlaps selected value

[shoe5454]

With a select TextField that has a label and null initial value, when focus is lost the selected value will overlap the label. This only happens if the initial value is null, if it is a blank string the issue does not occur.

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

Expected Behavior

TextField's selected value should not overlap the label when focus is lost.

Current Behavior

TextField's selected value overlaps the label when focus is lost.

Steps to Reproduce

Link: https://codesandbox.io/s/wqp00361y7

1. Select a value from the dropdown
2. Click outside of the field so that the TextField loses focus
3. See how the label and selected value overlaps.

Context

I have a TextField select component whose initial value is null, not a blank string.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.1.1 |
| React | 16.4.1 |
| Browser | Chrome Version 69.0.3497.100 (Official Build) (64-bit) |
| TypeScript | No |
| etc. | Windows 7 64-bit |

[shoe5454]

TextField values should not be null

[Dileep9999]

Use InputLabelProps as props_
<TextField select InputLabelProps={{shrink:this.state.value?true:false}} value={this.state.value} onChange={this.handleChange} > {options.map(data=>{ *iterate options )} </TextField>

use onChange to setState value

[mrogach2350]

@Dileep9999 's solution fixed it for me, but just wanted to add you can tighten up the ternary.

Instead of
InputLabelProps={{ shrink: this.state.value ? true: false }}

use
InputLabelProps={{ shrink: !!this.state.value }}

[khpa]

@Dileep9999 's solution fixed it for me, but just wanted to add you can tighten up the ternary.

Instead of
InputLabelProps={{ shrink: this.state.value ? true: false }}

use
InputLabelProps={{ shrink: !!this.state.value }}

how can I leave 1000 likes and hearts for this comment? :) thanks!!!