MUI Select variant="filled" vertically misaligned text

Question

When using a MUI v5 (5.0.4) Select component with variant='filled', the text of the selected item is incorrectly aligned vertically: it sits at the bottom, while the select arrow icon is correctly vertically centered.

<Grid
  container
  direction="column"
  style={{ minWidth: "35em", maxWidth: "60em" }}
  >
  <Typography variant="subtitle1">Appearance</Typography>
  <Card>
    <List>
      <ListItem>
        <ListItemText primary="Theme" />
        <ListItemSecondaryAction>
          <Select variant="filled" value={0}>
            <MenuItem value={0}>user preference</MenuItem>
            <MenuItem value={1}>light</MenuItem>
            <MenuItem value={2}>dark</MenuItem>
          </Select>
        </ListItemSecondaryAction>
      </ListItem>
    </List>
  </Card>
</Grid>

I want to use the "filled" variant, as it was the default for MUI v4 before. How to fix this?

For reference, this is my codesandbox example for MUI v4, which worked as shown next (maybe by accident?):

By design, the `filled` variant expect an `InputLabel` text. For that they are forcing the text little bit down. Either you can use `InputLabel` or fix the bottom. — SelvaS, Oct 16 '21 at 13:59
the filled `Select` saves some space at the top for the label in case you supply it, you can play around with the example [here](https://mui.com/components/selects/#filled-and-standard-variants) and see that it works as expected. The question now is do you want the selected value always vertically aligned? — NearHuscarl, Oct 16 '21 at 14:01
@NearHuscarl I've updated the codesandbox but I must be doing something wrong, as the `InputLabel` is rendered in the wrong place. Besides that, is this a breaking change from MUI v4, because I never used an `InputLabel` before in v4 and it worked perfectly with the default variant, which seems to be `filled` in v4? — TheDiveO, Oct 16 '21 at 14:12
@TheDiveO If you use label in a `Select`, the easiest way is to switch to `TextField` with the select mode instead. See [this](https://stackoverflow.com/a/67068903/9449426) answer for more detail. — NearHuscarl, Oct 16 '21 at 14:15
I've wrapped all in a `FormControl`, so that the `InputLabel` now gets positioned correctly. But still, `Select` doesn't behave correctly when according to the documentation example you link to it should? — TheDiveO, Oct 16 '21 at 14:18
It works in my codesandbox from the answer I linked you if you change the variant to [filled](https://codesandbox.io/s/67064682-material-ui-outlined-select-label-is-not-rendering-properly-forked-53sgi?file=/src/App.js) — NearHuscarl, Oct 16 '21 at 14:24
You're missing [this](https://i.stack.imgur.com/65arV.png) label from my answer. That's why I recommend you to use `TextField` first as it prevents you from making these kind of errors. — NearHuscarl, Oct 16 '21 at 14:26
You probably refer to `FormControl variant='filled'`? Anyway, where do I remove `Select`'s top padding to make it work as before in MUI v4? (I've added the `InputLabel`, but if I don't want it, how do I remove the padding?) — TheDiveO, Oct 16 '21 at 14:27
I'm a bit confused, the v4 filled `Select` looks the same to the one in v5. [See](https://v4.mui.com/components/selects/#simple-select) this section. Can you point me to the codesandbox where to v4 works for you? — NearHuscarl, Oct 16 '21 at 14:33
Not a codesandbox, but the production code using MUI v4: https://github.com/TheDiveO/lxkns/blob/10f0f0b9c9efdbeafc2830f1a8707c0a734925ae/web/lxkns/src/views/settings/Settings.tsx#L87 — TheDiveO, Oct 16 '21 at 14:37
the v4 one works because you use the default variant `standard`, in v5 you change it to `filled`, the reason why `filled` doesn't work I explained below. the reason `standard` works is because the label appears above of the input area, so the selected value doesn't need to move itself down. See [this](https://i.stack.imgur.com/neT9l.png). — NearHuscarl, Oct 16 '21 at 15:10
@TheDiveO I think there is a misunderstanding here, according to the v4 docs, the default variant of the `Select` [is standard](https://v4.mui.com/api/select/), not filled. in v5, they changed it to outlined. — NearHuscarl, Oct 16 '21 at 15:30

NearHuscarl · Answer 1 · 2021-10-16T14:52:20.153

1

Have a look at the filled TextField in material design. When you use TextField/Select with filled variant, it's best to use with a label, the intention is that the label occupies the top half while the selected value occupied the other bottom half.

But if you don't want to put a label inside the filled area, you can set hiddenLabel to true so the FilledInput knows that there won't be a label and vertically align the selected value for you:

<TextField
  select
  variant="filled"
  value={0}
  hiddenLabel
>

edited Oct 16 '21 at 14:52

answered Oct 16 '21 at 14:38

NearHuscarl

66,950
18
261
230

From reading the MUI `Select` component source code, I've found that `FormControl hiddenLabel` does the job as this is a settings page using more extensive setting descriptions anyway. – TheDiveO Oct 16 '21 at 14:45
@TheDiveO you're right, I missed that one in front of me, looks like it the specific prop for [FilledInput](https://mui.com/api/filled-input/#main-content), the other variants don't have it. – NearHuscarl Oct 16 '21 at 14:48

MUI Select variant="filled" vertically misaligned text

1 Answers1