React Material UI Label Overlaps with Text

Question

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 updat

Answer 1

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

export default function UserProfile(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(
    <div style={{padding:"10px"}}>
        <Grid container className={classes.card}>
            <Container component="main" maxWidth="xs">
            <>{ isLoading ? <div> </div> : 
            <div className={classes.paper}>
                <Typography variant="h6">User Profile</Typography>
                <TextField
                    key="Name"
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="Name"
                    label="Name"
                    value={user.name}
                    InputProps={{
                        readOnly: true,
                    }}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="email"
                    label="Email Address"
                    value={user.email}
                    InputProps={{
                        readOnly: true,
                    }}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    fullWidth
                    id="phone"
                    label="Phone"
                    value={user.phone_number}
                    InputProps={{
                        readOnly: true,
                    }}
                />
            </div>
            }</>
            </Container>
        </Grid>
    </div>
);

}

Answer 2

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

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

Answer 3

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

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

Answer 4

I can say whatever works for me try this out .

This is for Functional based Component.

 const Example = () =>{
   const [name, setName] = useState("");
    const editName = (name) =>{
    setName(name);
  }

        return(
          <TextField
            required
            variant="outlined"
            margin="normal"
            fullWidth
            value={name}
            onChange={e => setName(e.target.value)}
            label="Enter Name"
          />
      )
  }

Answer 5

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

<div className="input-field">
   <input type="text" name="name" ref="name" value={this.state.name || ''} />
   <label htmlFor="name">Name</label>
</div>