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 update them. The existing values have been set using the defaultValue attribute of the input fields:

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

With this approach, the intended functionality works fine. However, the labels of all text fields overlaps with their values. Please see below screenshot:

If I click on each field, the label moves up as expected. However, at the page load, labels do not move up. I tried using the value attribute of the input fields together with the onChange() event handler but experienced the same problem. Really, appreciate your thoughts on this.

The complete source code of this application can be found here: https://github.com/imesh/react-examples/tree/master/meetups/meetups-web-client

This particular page can be found here: https://github.com/imesh/react-examples/blob/master/meetups/meetups-web-client/src/components/UpdateMeetup.js

Github Issue: https://github.com/Dogfalo/materialize/issues/5995

Intermezzo

could you confirm you see the same glitch in this sandbox codesandbox.io/s/rwyj71lvx4 ? – Junia

Thanks Evgeny for the quick response! Yes, I could see the same issue in the above sandbox. However, I found a workaround. Adding class active to the labels solved the problem. Thanks! – Intermezzo

Still I see the problem when the page is refreshed or rather if directly opened the update page URL. The problem does not occur if navigated through a React Link. – Intermezzo

I can see correct labels in chrome and ff on windows. can it be browser related? – Junia

So is it materialize or material-ui? – Objurgate

Answer 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

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

Hebdomadal

Could you please be more precise and write where should this piece of code be added in the first place. – Ecklund

Your suggestion is not clear as the constant value is not used in the code snippet. – Servomotor

@223seneca, I removed the const and added the example in the input example. – Hebdomadal

By the way, there is a warning for the value being undefined in the console. I'm here because I searched Stack Overflow before looking at my console output. Because there's a warning in the console I tend to avoid using the || '' pattern and finding the root cause of why it's being passed undefined. The latest reason was because in some old code I had written I had passed {} instead of just not rendering the parent component when a JSON object wasn't available. – Posy

It seems that if the "value" is null when the page first renders, this problem occurs and stays, even after the value becomes a valid string, later on. Seems like a bug. – Stinson

In my case with a Select, the label overlapped because I was passing [] as children. I changed it to null and that fixed the overlap. – Cue

I would just like to add to this to say you probably want a nullish coalescing operator ?? instead of || because you may want a falsy value – Biramous

To explain the fix - The Material UI element can either be "controlled" - you're in charge of reading and setting the value - or "uncontrolled" in which the element stores its state internally, and you query it through a ref. When the element first renders, if its value is undefined it is deemed "uncontrolled", but if it has a value it is Controlled. Passing in an empty string instead of undefined ensures the element is Controlled as we want it – Ascension

Warning if your field is numeric: this solution will replace 0 (zero) with empty string. – Rutkowski

I don't like this solution, it causes a performance hit because the value is a state value https://mcmap.net/q/237806/-react-input-onchange-lag – Automotive

this caused my input field to stop receiving input, i.e. returning to empty ('') on change (btw it had a change handler that touched state, so it makes sense). so this may be an OK-ish workaround for some cases, but the other answers using shrink are more stable. – Refugiorefulgence

OUTSTANDING answer! Worked perfectly for me. Even though I always have data to display, it seems to remember the null state from the initial render and stubbornly refuses to behave. Thanks very much! – Metallography

Answer 2

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

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

OR

<TextField
  // ... rest
  InputLabelProps={{ shrink: !!this.state.name }}
/>

Theorize

Thats very useful for date fields without a default value as well – Durable

another useful property to work together with 'shrink' is the 'notched' if you're using OutlineInput together with 'InputLabel' – Villasenor

Problem with this is it removes the label from the input fiedl for me – Incondite

Answer 3

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 }}  

Example:

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

Lizarraga

I get an error saying 'field' is not defined... – Bobbinet

Maybe use InputLabelProps={{shrink: true}} to force it – Viridescent

Answer 4

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 ?? ""}
  helperText={touched.endingMonth && errors.endingMonth}
  error={Boolean(touched.endingMonth && errors.endingMonth)}
/>

Helli

it's enough to check '== null' with double equals. – Object

You can shorten checking for null and undefined by using nullish coalescing: values.endingMonth ?? '' – Butyrin

Answer 5

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>
);

}

Haggadah

This solved the issue I was facing as well, setting the default value of loading to True solve the problem – Prevailing

Answer 6

It's 2022 and I still have this error; I have changed the wrapper element around TextField component from grid to div and it solved the issues for me.

Schuster

Thank you. This addresses the issue for me on MUI v5.8 – Shelby

I have div but it didn't work for me – Incondite

Answer 7

I have been trying to resolve this for my login page and it got resolved using these. Just add : For Username :

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

For Password Feild :

<InputLabel shrink={true}
>Password</InputLabel>

Microelectronics

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Yuu

Answer 8

I had this problem but I solved it by adding shrink

return (
    <Controller
      name={name}
      control={control}
      defaultValue={defaultValue || ''}
      render={({ field, fieldState: { error } }) => (
        <TextField
          {...field}
          select
          fullWidth
          label={label}
          value={field.value || ''}
          SelectProps={{ native: true, defaultValue: defaultValue || '' }}
          InputLabelProps={{ shrink: field.value }}
          error={!!error}
          helperText={error?.message}
          {...other}
        >
          {children}
        </TextField>
      )}
    />
  );

Fontes

Answer 9

**Solution 1:** Set Shrink Attribute Based on Field Value if you want to move the label to outline only when it has value

  <TextField
   **key="title"**
   required
   id="title"
   label="Story Title"
   name="title"
   fullWidth
   value={this.state.title}
   InputLabelProps={{
   shrink: this.state.title?true:false,
   }}
/>

Solution 2: Set Shrink attribute as true If you are fine to display the label always at the outline of TextBox 

<TextField
          id="outlined-number"
          label="Number"
          type="number"
          **InputLabelProps={{
            shrink: true,
          }}**
        />


   

Badillo

the ?true:false part may be omitted in most cases – Refugiorefulgence

Answer 10

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"
          />
      )
  }

Renell

Answer 11

Below worked:

<InputLabel shrink={true}>Select A Role</InputLabel>

InputLabelProps gave error in functional component in react.

Fever

Answer 12

Utilizing InputLabelProps={{shrink: true}}, you can add a state and an onSelect to toggle the shrink state

const [shrink1, setShrink1] = useState(false)

<TextField
            fullWidth
            id='filled-basic'
            label='Name'
            variant='filled'
            value={formState.name}
            onChange={(event) => setFormState({ name: event.target.value })}
            onSelect={() => setShrink1(true)}
            InputLabelProps={{ shrink: shrink1 }}
          />

Adessive

Answer 13

My RHF hook for MUI:

// hooks.js
function useMUI(useFormObject) {
  const register = (name, options) => ({
    ...useFormObject.register(name, options),
    InputLabelProps:{ shrink:!!useFormObject.watch(name) }
  });
  return {
    ...useFormObject,
    register
  };
}

Usage example:

const { register, handleSubmit } = useMUI(useForm());

return (
  <TextField label="First name" {...register('firstName')} />
);

Result:

Bennion

Answer 14

I made it work by setting the value to null for the first render when the state value is undefined.

Here's an example:

          <TextField
              label={errors.email || "Email"}
              name={'adminEmail'}
              error={!!errors.email}
              onChange={handleChange}
              value={values.email || null}
              variant="outlined"
              className={`mb-8 `}
              autoComplete="new-password"
          />

Hardwick

Answer 15

After lot research I found solution. In input styles please use marginTop:10, Below I have added code snippet.

    <TextInput
      label="Description"
      variant="standard"
      value={descTextValue}
      inputStyle={{            
        marginTop:10
      }}
      onChangeText={value => setDescTextValue(value)}
      color="#B3B3B3"
      multiline
      numberOfLines={4}
      maxLength={250}
    />

I hope it will works.

Bleachers