React Material Ui Label Overlaps With Text

I'm using Material UI in a React application and trying to implement an entity update page. In this, we would need to set the exiting values of the entity to let the user update th

Solution 1:

This is due to the undefined state of the value.

This workaround works for me as a fallback:

value= this.state.name || '';

e.g. for Material-UI

<divclassName="input-field"><inputtype="text"name="name"ref="name"value={this.state.name || ''} /><labelhtmlFor="name">Name</label></div>

Solution 2:

InputLabel has a prop shrink. you can use in TextField like below:

<TextField
  // ... rest
  InputLabelProps={{ shrink: true }}  
/>

Solution 3:

I solved this by using a condition if it is not null && undefined then assign the value otherwise "". Here use the Formik

<TextFieldtype="text"label="Ending Month"variant="outlined"fullWidthsize="small"name="endingMonth"value={values.endingMonth === null ||
                      values.endingMonth === undefined
                        ? ""
                        :values.endingMonth
                    }
                    helperText={touched.endingMonth && errors.endingMonth}
                    error={Boolean(touched.endingMonth && errors.endingMonth)}
                  />

Solution 4:

I had the same issue; however it was inconsistent - meaning sometimes I have the labels displayed properly and sometimes overlapped

I tried the following and it worked fine. Basically the form is first rendered empty without data; then the useEffect was fetching the data and populating the data. I set a isLoading state variable - this will be initially set to true and set to false after the data is fetched by API.

Display all the data only after isLoading is false - this works well.

Code Snippet

exportdefaultfunctionUserProfile(props) {
const classes = useStyles();
const [user, setUser] = React.useState({});
const [isLoading, setIsLoading] = React.useState(true);

const getUser = async () => {
    const requestOptions = {
        method: 'GET',
        cache: 'no-cache',
        headers: { 
            'Content-Type': 'application/json',
        },
        redirect: 'follow',
        referrerPolicy: 'no-referrer',            
    };

    const response = await axios.request(
        "/api/userprofile",
        requestOptions
    );

    const responseData = await response.data;
    
    setUser( responseData.userProfile );
    setIsLoading(false);
}

React.useEffect(() =>{
    getUser();
    console.log(user);
})

return(
    <divstyle={{padding:"10px"}}><GridcontainerclassName={classes.card}><Containercomponent="main"maxWidth="xs"><>{ isLoading ? <div></div> : 
            <divclassName={classes.paper}><Typographyvariant="h6">User Profile</Typography><TextFieldkey="Name"variant="outlined"margin="normal"fullWidthid="Name"label="Name"value={user.name}InputProps={{readOnly:true,
                    }}
                /><TextFieldvariant="outlined"margin="normal"fullWidthid="email"label="Email Address"value={user.email}InputProps={{readOnly:true,
                    }}
                /><TextFieldvariant="outlined"margin="normal"fullWidthid="phone"label="Phone"value={user.phone_number}InputProps={{readOnly:true,
                    }}
                /></div>
            }</></Container></Grid>
    </div>
);

}

Solution 5:

I fixed it by adding the condition on shrink based on a text field value.

Just add this code in the text field: Updated (2022)

InputLabelProps={{ shrink: field.value?true:false }}  

Example:

<Controller
name="formatted_phone_number"
control={control}
render={({ field }) => (
  <TextField
    {...field}
    className=""id="formatted_phone_number"label="Phone"type="text"variant="outlined"fullWidthInputLabelProps={{shrink:field.value?true:false }}  
  />
)}
/>