MUI - Outlined select label is not rendering properly

user_3716628 0
Viewed 22026

As per the demo, the label for a MUI outlined select input should sit on top of the top border of the select box.

enter image description here

However, in my application, the z-index of the label seems to be placing it behind the top border and thus it looks like a line is cutting through the label.

enter image description here

I have pretty much taken the code exactly from the documentation, and as far as I know, do not have any styles conflicting with this input element. I have compared the styles in the debugger to what I have and what is present in the documentation, and I do not see any of my first party CSS files causing a different style to be set on the element.

Any idea what might be going wrong here?

Here is the source code:

<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}>
  <InputLabel id='test-select-label'>Label</InputLabel>
  <Select
    labelId='test-select-label'
    id='test-select'
    value={'test1'}
    onChange={e => setTest(e.target.value)}
    size='small'
  >
    <MenuItem key={1} value={'test'} >Test 1</MenuItem>
    <MenuItem key={2} value={'test2'} >Test 2</MenuItem>
  </Select>
</FormControl>
material-ui reactjs drop-down-menu css
4 Answers

Solution 1: Use TextField

This is what TextField is for. It uses FormControl and InputLabel internally and make sure they work well together. You can tell TextField to render select instead input by overriding the select props:

<TextField
  value={value}
  onChange={(e) => setValue(e.target.value)}
  select // tell TextField to render select
  label="Label"
>
  <MenuItem key={1} value="test">
    Test 1
  </MenuItem>
  <MenuItem key={2} value="test2">
    Test 2
  </MenuItem>
</TextField>

For more detail about how TextField works, see this answer.

Solution 2: Use Select

If you decide to use Select, you need to write more code to do the same amount of work:

Pass the label text as InputLabel children

<InputLabel id="test-select-label">Label</InputLabel>

This label text will be rendered on the screen as the Select label when put inside FormControl and next to the Select component.

Pass the label text to the label props of the Select component

This label text is hidden and used to override and remove the part of the border-top where the real label is occupied when the Select label is shrinked.

<Select labelId="test-select-label" label="Label">

Putting it together we'll have something like below, note that with this approach we need to set the label in 2 different places which is not very DRY, so I'd prefer the first approach.

<FormControl>
  <InputLabel id="test-select-label">Label</InputLabel>
  <Select
    value={value}
    onChange={(e) => setValue(e.target.value)}
    labelId="test-select-label"
    label="Label"
  >
    <MenuItem key={1} value="test">
      Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
      Test 2
    </MenuItem>
  </Select>
</FormControl>

Live Demo

Codesandbox Demo

user_94494260

If you add the label property to your select component your problem should disappear.

...
<Select
  value={value}
  onChange={(e) => setValue(e.target.value)}
  label="Label" // add this 
>
  <MenuItem key={1} value="test">
    Test 1
  </MenuItem>
  <MenuItem key={2} value="test2">
    Test 2
  </MenuItem>
</Select>
...

Here is a live demo where you can see the difference:

Edit material-ui-outlined-select-label-is-not-rendering-properly

user_152611910

Try this method, it worked for me.

JSX:

<TextField select variant={"outlined"} style={{width: "100%"}} label="Label">
    <MenuItem key={1} value="test">
        Test 1
    </MenuItem>
    <MenuItem key={2} value="test2">
        Test 2
    </MenuItem>
</TextField>

CSS:

.MuiSelect-outlined.MuiSelect-outlined, .MuiSelect-outlined.MuiSelect-outlined:active, .MuiSelect-outlined.MuiSelect-outlined:focus  {
    background-color: transparent;
    text-align: left;
    font-family: sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
user_154294940

I had a similar issue when I tried to set padding on the FormControl component. I had the proper id and label, but it was still an issue. CSS is not my strong suit, but I noticed that if I could replicate the layout I wanted using margin on the FormControl component, the label aligned appropriately. See image with padding instead of margin:

FormControl with padding

user_51004400
Related