Label overlapping input

https://material-ui.com/demos/text-fields/#limitations The documentation specify the following warning :

The input label “shrink” state isn’t always correct. The input label is supposed to shrink as soon as the input is displaying something. In some circumstances, we can’t determine the “shrink” state

I encounter this bug and will give you a hint : this is due to the undefined state of the value; in an input field, always specify the value as empty string instead of undefined

Under such circomstance, when combining with an object spread operatior {...props} will generate by the compiler something like this value=undefined. An undefined property is also considered non exist thus create the bug.

To fix this (as a workaround till the Core is fixed), always put a fallback empty for input value

value={this.state.value || ''}

sample.txt

[flyingangel]

I’ve already gave you the full file sample.txt. Here is how to use

<InputZipcode label="Zipcode" value={null} />
<InputZipcode label="Zipcode" />

This will create the overlap bug. To fix it, value must be force as empty string “” during props injection to Material Core Input

[oliviertassinari]

@flyingangel Could you share a reproduction live example then? Thank you.