Set the width of material UI select based on label size

Question

I've got a select:

<FormControl className={classes.formControl}>
    <InputLabel htmlFor="age-native-simple">{this.props.label}</InputLabel> 
    <Select
            native
            value={this.state.value}
            onChange={this.handleSelectChange('value')}
        inputProps={{
            name: this.props.label,
            id: this.props.id,
        }}
        >
        {this.buildSelectOptions(this.props.options)}
    </Select>
                        {(this.props.helperText)?<FormHelperText>{this.props.helperText}</FormHelperText>:null}
</FormControl>

The formControl class looks like this:

formControl: {
    margin: 0,
    fullWidth: true,
    backgroundColor: '#9ee',
    wrap: 'nowrap'
},

It works reasonably well - sizing itself to be as small as possible while still showing the largest possible option value.

Unfortunately, when the InputLabel is longer than the contents of the select options ... the label wraps and looks terrible.

How can I keep my select from wrapping the input label? I'd like it to simply expand the select as needed, as it does when there is a long entry in the option list if possible. Setting a "minWidth" isn't my preferred solution for many reasons (mainly that this component is used by a bunch of different things and calculating the minWidth of them all would be difficult)

Answer 1

Edit: I misunderstood the question here. I thought the issue was with menu items wrapping which my answer would fix. The correct and simple fix to the question is that you are missing display: 'flex' from your formControl class.

Like this:

  formControl: {
    margin: 0,
    fullWidth: true,
    backgroundColor: '#9ee',
    display: 'flex',
    wrap: 'nowrap'
  },

Here's a working sandbox

It looks like <Select/> has an autoWidth property that you can set to achieve this. It's default is false.

From the docs:

If true, the width of the popover will automatically be set according to the items inside the menu, otherwise it will be at least the width of the select input.

It's used like this:

 <Select
    native
    autoWidth={true}
    value={this.state.value}
    onChange={this.handleSelectChange('value')}
    inputProps={{
        name: this.props.label,
        id: this.props.id,
    }}
    >
    {this.buildSelectOptions(this.props.options)}
 </Select>