TextField with type=number treats makes label overlap invalid values

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

Expected Behavior

When you enter an invalid value into TextField of type="number" the label should stay where it was - above the value.

Current Behavior

After the input with an invalid value is blurred the label starts overlapping the value.

Steps to Reproduce

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

1. Remove the input value and blur the input; the label will descend into the input.
2. Focus the input again and type the letter e.
3. Blur again.
4. See how the label descends, covering the just written e.

Context

The reason for this issue is that input with type="number" will set its value field to an empty string if the entered value is invalid. The only way to distinguish that from an empty field is to check for the input validity.badInput field. See this example: https://jsfiddle.net/py7fbxtu/5/

Your Environment

Tech	Version
Material-UI	v3.0.1 & v1.4.3
React	v16.3.2
Browser	Chrome 68.0.3440.106
TypeScript	N/A
etc.

[gnapse]

The workaround is to set the shrink property on the label

Couldn’t the library handle this? That is, if the input type equals “number”, then force the label shrink property?

[oliviertassinari]

Yes, exactly.