stackworx / formik-mui

Bindings for using Formik with Material-UI

Home Page:https://stackworx.github.io/formik-mui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

CodeSandbox

@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.