'Material-UI InputLabel covers text when Input value set by another Input field

I am creating a form with Material UI. The form has two sections. One is the user's shipping address, and the other is the billing address. In many circumstances the latter is identical to the former, so I provide a checkbox to automatically fill out the billing address with the shipping address. It does so by calling a function that sets the to-be-updated field's value equal to the other field's value, which is saved in the React state.

The MUI Input component handles the fields themselves. The InputLabel component is also used to label them. Normally, when values are entered in a field the InputLabel text moves above the field like this:

InputLabel above

However, when the checkbox is checked and the value is populated in the billing address field by typing in the shipping address field, the label fails to get out of the way:

enter image description here

I have been unable to solve the problem and no similar questions on Stack Overflow seem to resolve my issue. How do I fix this?

EDIT:

Here is the code from the screenshot:

<Grid container spacing={40} className={classes.formContainer}>
  <Grid item xs>
  </Grid>
  <Grid item xs>
    <FormControlLabel
      control={
        <Checkbox
          checked={this.state.sameAddressScreen2}
          onChange={this.handleSameAddressScreen2}
          value="sameAddressScreen2"
        />
      }
      label="Same as Location Address"
    />
  </Grid>
</Grid>
<Grid container spacing={40} className={classes.formContainer}>
  <Grid item xs={6}>
    <FormControl margin="normal" required fullWidth>
      <InputLabel htmlFor="locationStreetAddress1">Street Address 1</InputLabel>
      <Input id="locationStreetAddress1" name="locationStreetAddress1" autoFocus value={this.state.locationStreetAddress1} onChange={this.handleChange} />
    </FormControl>
  </Grid>
  <Grid item xs={6}>
    <FormControl margin="normal" required fullWidth>
      <InputLabel htmlFor="mailingStreetAddress1">Street Address 1</InputLabel>
      <Input id="mailingStreetAddress1" name="mailingStreetAddress1" autoFocus value={sameValue('mailingStreetAddress1')} onChange={this.handleChange} />
    </FormControl>
  </Grid>
</Grid>

This is the state and the sameValue function that code invokes:

state = {
  locationStreetAddress1: '',
  mailingStreetAddress1: '',
  sameAddressScreen2: false,
};

sameValue = (field) => {
  if (this.state.sameAddressScreen2 === true) {
    let stateKey = 'location'.concat(field.slice(7));
    return this.state[stateKey];
  } else {
    return this.state[field];
  }
}
reactjsformsmaterial-ui


Solution 1:[1]

The InputLabel component has a property called "shrink" - set this to true when the Input component has a value and you will get the desired behavior.

Solution 2:[2]

This problem is specified in the documentation itself. https://mui.com/material-ui/react-text-field/#shrink

Use This

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

Or

<InputLabel shrink>Count</InputLabel>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cody Swann
Solution 2 Ayush Tiwari

Related Questions