Label of Multiple Select is crossed out by the outline of the input field

Question

I made a multiple select list with Material-UI. But when I select an item the label should shrink and fit into the outline of the input field. The problem is the outline stays the same and the label shrinks behind it.

I tried looking for a solution in the Material-UI docs. It seems like there isn't any multiple select list outlined variant. So I wonder if it is because there is no outlined variant of the multiple select list or that it is due to something else.

<FormControl
   variant="outlined"
   fullWidth
>
   <InputLabel
      ref={ref => {
         this.InputLabelRef = ref;
      }}
      htmlFor="members"
      error={this.props.touched.members && Boolean(this.props.errors.members)}
   >
      Members
   </InputLabel>
   <Select
      onChange={this.change.bind(null, "members")}
      multiple
      value={this.state.members}
      error={this.props.touched.members && Boolean(this.props.errors.members)}
       input={
          <OutlinedInput
              labelWidth={0}
              name="members"
              id="members"
          />
        }
     >
     <MenuItem value={'Baspa'}>Baspa</MenuItem>
     <MenuItem value={'Plorky'}>Plorky</MenuItem>
     <MenuItem value={'Rizzels'}>Rizzels</MenuItem>
    </Select>

I also made a CodeSandBox: https://codesandbox.io/s/jnlx1vky39

This is how it looks like:

https://imgur.com/a/Wpf7OE0

Answer 1

You were missing a couple pieces that are shown in the documentation that allow the outline to know the label width:

  componentDidMount() {
    this.setState({
      labelWidth: ReactDOM.findDOMNode(this.InputLabelRef).offsetWidth
    });
  }
... 
 <OutlinedInput labelWidth={this.state.labelWidth} name="members" id="members" />

Here's the full code:

Answer 2

The original answer is no longer correct. According to this resolved MUI issue, labelWidth is no longer supported. Instead, set the label on the <OutlinedInput> to match the label on the <InputLabel>. Ex:

<InputLabel id="foo">{tag}</InputLabel>
   <Select
      input={<OutlinedInput label={tag} />}

Full example in the MUI Docs