The `Select` component doesn't adapt the label to the used variant
TiredFalcon opened this issue · comments
Current Behavior 😯
The label of the Select
component displays wrongly if I use variant="standard"
. The label is displayed as if the variant were "outlined"
. Moreover, the component doesn't respect the fullWidth
prop, and instead only grows to the size of whatever value is displayed.
Expected Behavior 🤔
The label of the Select
component should display according to the used variant. The fullWidth
prop should be respected.
Steps to Reproduce 🕹
Here is an example using the Select
component, which shows its problems. Below it, I used a TextField
with the select
prop to show the expected behavior.
@TiredFalcon I think it's not well documented but if you check Select
props type you can see that you probably need to use something like this:
<Field component={Select} formControl={{ fullWidth: true, variant: 'standard', }} inputLabel={{ variant: 'standard', }} > {items.map((item, i) => ( <MenuItem value={item.id} key={i}> {item} </MenuItem> ))} </Field>
This seems to work perfectly, thanks!
You're also right that should be better documented though.