Material-ui: Label overlapping input

[flyingangel]

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

[oliviertassinari]

@flyingangel Check the warning in the console. React should raise a controlled/uncontrolled related issue.

[flyingangel]

There isn't warning. And this bug is known and warned in the documentation

[oliviertassinari]

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

[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

[paulossa]

Even though I'm doing the optional empty string...

I can't get rid of the problem here :'(

<TextField
          {...common_props}
          label="Conta (com digito)"
          name="account"
          value={acc.account || ''}
          onChange={this.handleInputChange(idx)}
          error={false}
          helperText={''}
        />