[Select] Changes the default input based on variant prop

[netochaves]

• I have followed (at least) the PR section of the contributing guide.

Closes #14203

Before

When using the variant prop to change the input of select nothing happens.

After

Now when setting a value for variant like outlined the input will change based on this value, check the code bellow:

<Select
  value={values.age}
  onChange={handleChange}
  variant="outlined"
  labelWidth={labelWidth}
  inputProps={{ name: 'age', id: 'outlined-age-simple' }}
>

Output:

[mui-pr-bot]

Details of bundle changes.

Comparing: b18a78e...1286259

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.05% 🔺	+0.09% 🔺	330,921	331,085	90,355	90,435
@material-ui/core/Paper	0.00%	0.00%	68,774	68,774	20,485	20,485
@material-ui/core/Paper.esm	0.00%	0.00%	62,148	62,148	19,214	19,214
@material-ui/core/Popper	0.00%	0.00%	28,466	28,466	10,190	10,190
@material-ui/core/Textarea	0.00%	0.00%	5,094	5,094	2,137	2,137
@material-ui/core/TrapFocus	0.00%	0.00%	3,834	3,834	1,613	1,613
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,385	16,385	5,827	5,827
@material-ui/core/useMediaQuery	0.00%	0.00%	2,541	2,541	1,058	1,058
@material-ui/lab	0.00%	0.00%	153,209	153,209	46,685	46,685
@material-ui/styles	0.00%	+0.01% 🔺	51,492	51,494	15,303	15,304
@material-ui/system	0.00%	+0.05% 🔺	15,668	15,668	4,359	4,361
Button	0.00%	-0.01%	78,661	78,663	24,053	24,050
Modal	0.00%	0.00%	14,335	14,335	5,017	5,017
Portal	0.00%	0.00%	2,907	2,907	1,318	1,318
Rating	0.00%	0.00%	70,014	70,016	21,866	21,866
Slider	0.00%	0.00%	74,282	74,282	23,012	23,012
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	52,253	52,253	13,780	13,780
docs.main	0.00%	0.00%	597,376	597,376	190,811	190,811
packages/material-ui/build/umd/material-ui.production.min.js	+0.05% 🔺	+0.09% 🔺	301,843	302,003	86,690	86,765

Generated by 🚫 dangerJS against 1286259

[oliviertassinari]

Thanks

[ydax]

I realize this issue is closed, but I'm still wondering what the fix is, and I don't see it in the docs. I updated to v 4.9.10 and I'm still having this issue. I'm building this component as such:

<FormControl fullWidth variant="outlined" color="primary">
  <InputLabel id='location'>Which location?</InputLabel>
  <Select
    label={`Which location?`}
    labelId='location'
    multiple
    input={<Input />}
    renderValue={selected => selected.join(', ')}
    onChange={e => handleLocationSelection(e)}
    value={location}
  >
    { getLocationOptions() }
  </Select>
</FormControl>

Is this user error on my part?

[oliviertassinari]

@ydax Remove the input={<Input />}.