My MUI Select component doesn't display placeholder or label props

Question

Basically what the title says. I'm trying to use the Select component in my app but both the placeholder="Text" and label={"Text"} props don't display the expected result.

When using placeholder the Select is rendered as "empty", while the label prop looks like is doing something but after clicking on it this is the result:

My package.json shows

"@material-ui/core": "^5.0.0-alpha.27",
"@material-ui/icons": "^5.0.0-alpha.27",
"@material-ui/lab": "^5.0.0-alpha.27",
"@material-ui/system": "^5.0.0-alpha.27",

<Select
  label={"Text"}
  variant="outlined"
  size="small"
  fullWidth
>
  <MenuItem value={1}>Option 1</MenuItem>
  <MenuItem value={2}>Option 2</MenuItem>
</Select>

Answer 1

You can try using 'displayEmpty' option on Material Select, If your options don't include empty value ''

https://v4.mui.com/api/select/

and then in the renderValue function you can check if value is "", return the placeholder text.

Something like this :

      <Select
        displayEmpty
        renderValue={(value: unknown) => {
          if (!value) {
            return <Typography color="gray">your label here</Typography>;
          }
          return <>{value}</>;
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>