[material-ui][Select] displayEmpty=true renders label over value

[rgavrilov]

The problem in depth

When MenuItem value is empty string, see code below, form control label is rendered over the selected item content.

                <FormControl sx={{ minWidth: 300 }} size={'small'}>
                    <InputLabel id={'calculatorLabel'}>Calculator</InputLabel>
                    <Select
                        labelId={'calculatorLabel'}
                        value={calculator}
                        label={'Calculator'}
                        onChange={(e) => setCalculator(e.target.value)}
                        displayEmpty={true}
                    >
                        <MenuItem value={''}>
                            <em>All</em>
                        </MenuItem>
                        {_.map(calculatorsQuery.data, (c) => (
                            <MenuItem key={c.name} value={c.name}>
                                {c.name}
                            </MenuItem>
                        ))}
                    </Select>
                </FormControl>

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Select displayEmpty
Order ID: 52426

Search keywords:

[yamahmed]

Hey @rgavrilov i have two suggestions you can try:

1)You can provide a default non-empty value for the Select component.
2)You can conditionally render the InputLabel based on whether the selected value is empty or not.
See whatever works best for you.

[mj12albert]

@rgavrilov When you use displayEmpty, you must manually control the InputLabels shrunk state: https://mui.com/material-ui/api/select/#select-prop-displayEmpty

You should also use renderValue to ensure something is rendered when your option with empty value is selected: https://mui.com/material-ui/api/select/#select-prop-renderValue

<FormControl>
  <InputLabel shrink={val || val === ''}>
    Calculator
  </InputLabel>
  <Select
    value={val}
    label="Calculator"
    onChange={(e) => setVal(e.target.value)}
    displayEmpty
    renderValue={(val) => {
      if (val === '') {
        return 'All options';
      }
      return val;
    }}
  >
    <MenuItem value="">
      All
    </MenuItem>
    <MenuItem value="B">
      B
    </MenuItem>
    <MenuItem value="C">
      C
    </MenuItem>
  </Select>
</FormControl>

Here's a working demo: https://stackblitz.com/edit/mcve-react-material-ui-rx1lgs?file=src%2FApp.tsx

[github-actions]

👋 Thanks for using our open-source projects!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.