Select doesn't support variant="outlined"

So in the docs of Select component we can choose from either standard, outlined or filled variants

<Select variant='outlined' />

However by default adding outlined doesn’t change a thing on the component visuall, except that it receives outlined class.

There is this another issue https://github.com/mui-org/material-ui/issues/13049 where this has been discussed but I think hasn’t been actually addressed properly.

In the previous issue it’s claimed that the implementation is correct and only documentation needs fixing. Documentation indeed was updated but in the example author uses OutlinedInput which is manually passed to Select. IMO this is incorrect because as a user I expect that variant="outlined" would just work without me needing to do that manual labor of passing Input manually.

This is how at least TextField component works, you just pass variant and it works.

Expected Behavior 🤔

<Select variant='outlined' />

Should render something like this:

Current Behavior 😯

No outlined is rendered by default:

Steps to Reproduce 🕹

Link:

https://codesandbox.io/s/jl7nm4no0y

[oliviertassinari]

I would probably do:

      <TextField
        select
        variant="outlined"
        value={values.age}
        onChange={handleChange}
        inputProps={{ name: "age", id: "outlined-age-simple" }}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>

https://codesandbox.io/s/yqy753v80j

anytime I need to use the outlined variant.

@t49tran Let me see if we can improve the situation. Hold on.

[OutlinedInput]

What’s worse, is that the documentation for producing an actual outlined select requires the use of ‘ref’ to control ‘labelWidth’ on OutlinedInput. MUI’s Typescript definitions don’t support the ref property at all. Ideally, ‘variant’ would work like TextField or be removed all together.

https://material-ui.com/demos/selects/

  <FormControl variant="outlined" className={classes.formControl}>
          <InputLabel
            **ref={ref => {
              this.InputLabelRef = ref;
            }}**
            htmlFor="outlined-age-simple"
          >
            Age
          </InputLabel>
          <Select
            value={this.state.age}
            onChange={this.handleChange}
            input={
              <OutlinedInput
                **labelWidth={this.state.labelWidth}**
                name="age"
                id="outlined-age-simple"
              />
            }
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>