React Material-UI TextField with preloaded value does not move the label (label overlaps with the TextField content)

Question

I have Material-UI TextField:

<TextField id="gen_ref_num" className="col-6 form-control-sm" label="Number" variant="filled" value={this.props.invoice.gen_ref_num} onChange={this.handleChange}/>

And this.props.invoice.gen_ref_num has the value already preloaded. Unfortunately, the label overlaps with the content. When I am start editing the field, then the label moves upside and sits in the right position (no overlap anymore). How to ask Material-UI TextField to respect the pre-loaded values and to move label upwards?

Answer 1

The following code is the answer:

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

When adapted to the code in the question, the code ir:

InputLabelProps={{ shrink: !!this.props.invoice.gen_ref_num }} 

More is written about this at https://github.com/mui-org/material-ui/issues/13013

Answer 2

Wrap with form fixed this issue for me. It should be like this:

<form autoComplete="off">
    <TextField ... />
</form>