Material ui Textfield Hinttext overlap with with text when text is set with setState in react

Question

I am trying to autofill textfield using setState when user click on edit button. Text is set but default hintText and floatingLabelText overlap with text. When i click inside textfield lable go up but hintText overlap with text. How can i solve this?

this is textfield overlap image.

this is button

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick={this.editProduct.bind(this, product)} value="edit">Edit</button>

when user click on edit button editProduct function setState is set like this

editProduct = product => {
    this.setState({ 
        name: product.name,
        brand: product.brand,
        description: product.description, 
     });   
}

render() {
const {  name, brand, description } = this.state;
const values = { name, brand, description };

return ( 
    <div class="container">   
        <Addproduct
        handleChange={this.handleChange}
        values={values}
        />
  )
}

this is textfield inside Addproduct component

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange={handleChange('name')}
errorText={values.nameError}
defaultValue={values.name}
fullWidth
/>

@Ashishya11 after changing defaultValue to value my problem solved thanks. — vidy, Mar 07 '19 at 14:10

score 9 · Accepted Answer · answered Sep 03 '20 at 00:31

You can check against the value and put '' empty string if no input there like this answer: React Material UI Label Overlaps with Text

<TextField
   hintText="Enter Your Product Name"
   floatingLabelText="Product Name"
   onChange={handleChange('name')}
   errorText={values.nameError}
   defaultValue={values.name}
   value={values.name || ''}
   fullWidth
/>

If you don't need defaultValue just remove it

score 1 · Answer 2 · answered Aug 23 '20 at 11:41

I faced the same issue, but when I changed my functional component to class component it worked. Not sure what was the reason but it worked. I'm still looking for the reason, I'll update in this thread once I find. But you can give it a try and check if that works.

score 0 · Answer 3 · answered Mar 07 '19 at 17:14

0

You need to change the Textfield attributes to

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange={handleChange('name')}
 errorText={values.nameError}
 value={values.name}
 fullWidth
/>

answered Mar 07 '19 at 17:14

will92

956
7
12

Material ui Textfield Hinttext overlap with with text when text is set with setState in react

3 Answers3