Material-ui: Text Field Label overlapping with Stepper

[makeee9176]

Expected Behavior 🤔

In Stepper I have TextFields when I click the next page label should properly.

Current Behavior 😯

In Stepper I have TextFields when I click the next page label is not aligned properly. Label is overlapping.

Steps to Reproduce 🕹

Replace the following code in demo.js(Link mentioned ). (https://stackblitz.com/run?file=demo.js)
Click Next Text Box Label in overlap with box.
When I edit the box it will come to normal.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  root: {
    width: '90%',
  },
  button: {
    marginRight: theme.spacing.unit,
  },
  instructions: {
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit,
  },
});

function getSteps() {
  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}

function getStepContent(step) {
  switch (step) {
    case 0:
      return   (<TextField
          id="outlined-name"
          label="Name"
          margin="normal"
          variant="outlined"
        />)
    case 1:
     return   (<TextField
          id="outlined-name"
          label="Email ID"
          margin="normal"
          variant="outlined"
        />)
    case 2:
      return 'This is the bit I really care about!';
    default:
      return 'Unknown step';
  }
}

class HorizontalLinearStepper extends React.Component {
  state = {
    activeStep: 0,
    skipped: new Set(),
  };

  isStepOptional = step => {
    return step === 1;
  };

  handleNext = () => {
    const { activeStep } = this.state;
    let { skipped } = this.state;
    if (this.isStepSkipped(activeStep)) {
      skipped = new Set(skipped.values());
      skipped.delete(activeStep);
    }
    this.setState({
      activeStep: activeStep + 1,
      skipped,
    });
  };

  handleBack = () => {
    this.setState(state => ({
      activeStep: state.activeStep - 1,
    }));
  };

  handleSkip = () => {
    const { activeStep } = this.state;
    if (!this.isStepOptional(activeStep)) {
      // You probably want to guard against something like this,
      // it should never occur unless someone's actively trying to break something.
      throw new Error("You can't skip a step that isn't optional.");
    }

    this.setState(state => {
      const skipped = new Set(state.skipped.values());
      skipped.add(activeStep);
      return {
        activeStep: state.activeStep + 1,
        skipped,
      };
    });
  };

  handleReset = () => {
    this.setState({
      activeStep: 0,
    });
  };

  isStepSkipped(step) {
    return this.state.skipped.has(step);
  }

  render() {
    const { classes } = this.props;
    const steps = getSteps();
    const { activeStep } = this.state;

    return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep}>
          {steps.map((label, index) => {
            const props = {};
            const labelProps = {};
            if (this.isStepOptional(index)) {
              labelProps.optional = <Typography variant="caption">Optional</Typography>;
            }
            if (this.isStepSkipped(index)) {
              props.completed = false;
            }
            return (
              <Step key={label} {...props}>
                <StepLabel {...labelProps}>{label}</StepLabel>
              </Step>
            );
          })}
        </Stepper>
        <div>
          {activeStep === steps.length ? (
            <div>
              <Typography className={classes.instructions}>
                All steps completed - you&apos;re finished
              </Typography>
              <Button onClick={this.handleReset} className={classes.button}>
                Reset
              </Button>
            </div>
          ) : (
            <div>
              <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
              <div>
                <Button
                  disabled={activeStep === 0}
                  onClick={this.handleBack}
                  className={classes.button}
                >
                  Back
                </Button>
                {this.isStepOptional(activeStep) && (
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={this.handleSkip}
                    className={classes.button}
                  >
                    Skip
                  </Button>
                )}
                <Button
                  variant="contained"
                  color="primary"
                  onClick={this.handleNext}
                  className={classes.button}
                >
                  {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}

HorizontalLinearStepper.propTypes = {
  classes: PropTypes.object,
};

export default withStyles(styles)(HorizontalLinearStepper);

Link:

1.
2.
3.
4.

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | ^3.5.1 |
| React | yes |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

A proper reproduction: https://codesandbox.io/s/kxl61nynzv.

[eugenemlee]

I'm not sure if this is a bug or if you're just using it wrong. It seems like the input isn't being rerendered on step change. I was able to get it working by adding a "key" attribute to each TextField.

<TextField
  key="name"
  id="outlined-name"
  label="Name"
  margin="normal"
  variant="outlined"
/>

<TextField
  key="email"
  id="outlined-name"
  label="Email ID"
  margin="normal"
  variant="outlined"
/>

[JanKaifer]

Fixed in v4.4.0: https://codesandbox.io/s/kxl61nynzv.
-- credits to @oliviertassinari

[oliviertassinari]

@JanKaifer Thanks for the follow-up :)