reactjs - Material UI Grid - 一旦在 Select 元素中选择了一个项目，就会调整文本字段的大小

Question

我正在使用 Material UI 来构建一个简单的 UI。当我从 Select 元素中选择一个时，文本字段大小（设置为 fullWidth）越来越小。

我将代码减少到最少，可以重现奇怪的动作。

function ImportDialog(props) {
  const [state, setState] = useState({
    id: "",
    color: ""
  });

  const handleChange = name => event => {
    setState({ ...state, [name]: event.target.value });
  };

  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);

  useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);

  return (
    <div style={{ width: "40vw", height: "50vh", margin: "25vh auto" }}>
        <Grid container spacing={2}>
          <Grid item md={6}>
            <Grid container direction="column">
              <Grid item>
                <TextField
                  label="ID"
                  margin="dense"
                  variant="outlined"
                  fullWidth
                  value={state.id}
                  onChange={handleChange("id")}
                />
              </Grid>
              <Grid item>
                <FormControl
                  variant="outlined"
                  margin="dense"
                  fullWidth
                >
                  <InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
                    Color
                  </InputLabel>
                  <Select
                    value={state.color}
                    onChange={handleChange("color")}
                    labelWidth={labelWidth}
                    inputProps={{
                      name: "color",
                      id: "outlined-age-simple"
                    }}
                  >
                    <MenuItem value="">
                      <em>None</em>
                    </MenuItem>
                    <MenuItem value={1}>Sup1</MenuItem>
                 </Select>
                </FormControl>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
    </div>
  );
}

export default withStyles(styles)(ImportDialog);

当我从 Select 元素中选择一个后将焦点移到文本字段时，它会变小。

请尝试更大窗口大小的代码框。 https://codesandbox.io/s/material-demo-59siu 这是codesandbox的url。

标签： reactjsmaterial-ui