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

could you confirm you see the same glitch in this sandbox https://codesandbox.io/s/rwyj71lvx4 ? — Evgeny Timoshenko, Jun 20 '18 at 20:12
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! — imesh, Jun 21 '18 at 08:48
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. — imesh, Jun 21 '18 at 08:54
I can see correct labels in chrome and ff on windows. can it be browser related? — Evgeny Timoshenko, Jun 21 '18 at 08:58

jdGhuman · Answer 1 · 2019-03-01T00:31:18.857

108

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>

edited Mar 01 '19 at 00:31

answered Jan 16 '19 at 22:11

jdGhuman

1,390
1
9
11

Could you please be more precise and write where should this piece of code be added in the first place. – Matko Jan 29 '19 at 08:49
Your suggestion is not clear as the constant `value` is not used in the code snippet. – 223seneca Feb 27 '19 at 21:11
@223seneca, I removed the const and added the example in the input example. – jdGhuman Mar 01 '19 at 00:34
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. – Benjamin Atkin Jun 23 '19 at 22:30
2

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. – Nick Perkins Jan 13 '20 at 19:06
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. – 425nesp May 29 '20 at 17:02
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 – Jamie Feb 21 '21 at 20:33
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 – Oded Ben Dov Oct 20 '21 at 07:10
Warning if your field is numeric: this solution will replace 0 (zero) with empty string. – Marquez Jul 05 '22 at 23:26
I don't like this solution, it causes a performance hit because the value is a state value https://stackoverflow.com/questions/50819260/react-input-onchange-lag – Mees Sep 28 '22 at 07:32

score 59 · Answer 2 · answered Nov 30 '20 at 08:52

59

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

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

answered Nov 30 '20 at 08:52

Sultan Aslam

5,600
2
38
44

4

Thats very useful for date fields without a default value as well – Felix Geenen Dec 10 '20 at 02:22
another useful property to work together with 'shrink' is the 'notched' if you're using OutlineInput together with 'InputLabel' – Wan ChengCheng Nov 24 '22 at 14:34

score 21 · Answer 3 · edited Oct 06 '22 at 17:10

21

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

edited Oct 06 '22 at 17:10

DINA TAKLIT

7,074
10
69
74

answered Jan 28 '22 at 06:57

Taha Farooqui

637
10
25

I get an error saying 'field' is not defined... – anon37894203 Apr 26 '23 at 09:31

score 8 · Answer 4 · edited May 22 '23 at 05:30

8

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

edited May 22 '23 at 05:30

Sultan Aslam

5,600
2
38
44

answered Apr 12 '20 at 14:04

Md. Nazrul Islam

2,809
26
31

it's enough to check '== null' with double equals. – Andreas Herd May 17 '20 at 07:34
You can shorten checking for null and undefined by using [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing): `values.endingMonth ?? ''` – ABCD.ca Nov 05 '22 at 20:50

score 4 · Answer 5 · answered Oct 26 '20 at 17:06

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

}

This solved the issue I was facing as well, setting the default value of loading to True solve the problem — Ice_mank, Mar 10 '21 at 22:56

score 1 · Answer 6 · edited Apr 25 '22 at 04:40

1

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.

edited Apr 25 '22 at 04:40

mo3n

1,522
2
10
34

answered Apr 19 '22 at 22:09

RoniDoni

47
4

Thank you. This addresses the issue for me on MUI v5.8 – Tim Jun 01 '22 at 19:09

archana leela · Answer 7 · 2023-01-19T03:27:28.037

**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,
          }}**
        />

score 1 · Answer 8 · answered Jun 30 '23 at 11:19

1

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>

answered Jun 30 '23 at 11:19

Tanya Sharma

21
3

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](/help/how-to-answer). – Community Jul 02 '23 at 00:32

score 0 · Answer 9 · answered Apr 05 '20 at 18:34

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

score 0 · Answer 10 · answered Feb 21 '21 at 05:30

0

Below worked:

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

InputLabelProps gave error in functional component in react.

answered Feb 21 '21 at 05:30

Manohar Reddy Poreddy

25,399
9
157
140

score 0 · Answer 11 · answered Jul 14 '21 at 03:51

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

w3core · Answer 12 · 2023-02-12T17:06:41.353

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:

score 0 · Answer 13 · answered Apr 12 '23 at 08:53

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

score 0 · Answer 14 · answered Jul 05 '23 at 12:40

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.

React Material UI Label Overlaps with Text

14 Answers14

Linked