CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
antipopp
antipopp

Reputation: 599

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

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:

select component with empty label

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>

Upvotes: 21

Views: 51503

Answers (8)

Zain Saleem
Zain Saleem

Reputation: 181

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>

Upvotes: 18

Purplekooda
Purplekooda

Reputation: 11

I was able to get the renderValue to display using an uncontrolled select by providing the displayEmpty={true} when the value is empty.

https://v5.mui.com/material-ui/api/select/#props

<Select
  ...
  displayEmpty={true}
  value={selectedValue}
>
  <MenuItem value="">Select Role</MenuItem>
  {menuOptions.map(({ label, value }) => (
    <MenuItem key={value} value={value}>{label}</MenuItem>
    ))}
</Select>

Upvotes: 1

user28281786
user28281786

Reputation: 1

<MenuItem
      value={placeholder}
      disabled
      sx={{
        fontSize: { xs: "10px", sm: "12px", md: "14px", lg: "16px" },
        color: "#ADADAD",
        height: 0,
        visibility: "hidden",
        p: 0,
        minHeight: 0,
      }}
    >
      {placeholder}
    </MenuItem>
    {options.map((option) => (
      <MenuItem
        key={option}
        value={option}
        sx={{
          minHeight: "1rem",
          fontSize: { xs: "10px", sm: "12px", md: "14px", lg: "16px" },
        }}
      >
        {option}
      </MenuItem>
    ))}

Upvotes: 0

Matheus Ferreira
Matheus Ferreira

Reputation: 106

I "solved" that using TextField with select property instead:

        <TextField
          select
          label="Cidade"
          id="addressCity"
          className="flex-1 min-w-[200px]"
          value={city}
          placeholder="Cidade"
          InputLabelProps={{ shrink: true }}
          {...register("city")}
          onChange={(e) => {
            handleSelectCity(e.target.value);
          }}
        >
          <MenuItem key={1} value={""} className="h-8"></MenuItem>
          {cities &&
            cities
              .map((c) => (
                <MenuItem key={c.nome} value={c.nome}>
                  {c.nome}
                </MenuItem>
              ))}
        </TextField>

Upvotes: 1

Seth Samuel
Seth Samuel

Reputation: 355

<FormControl fullWidth>
  <InputLabel id="demo-simple-select-label">Age</InputLabel>
  <Select
    labelId="demo-simple-select-label"
    id="demo-simple-select"
    value={age}
    label="Age"
    onChange={handleChange}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

Upvotes: 0

Damjan
Damjan

Reputation: 486

      <FormLabel
        style={{
          marginLeft: '0.71em',
          marginTop: '-0.71em',
          paddingLeft: '0.44em',
          paddingRight: '0.44em',
          zIndex: 2,
          backgroundColor: 'white',
          position: 'absolute',
          fontSize: '0.75em',
        }}
      >
        {placeholder}
      </FormLabel>

Upvotes: 0

NeoXYZ
NeoXYZ

Reputation: 81

displayEmpty combined with renderValue solved the issue really nicely.

Upvotes: 8

Ryan Le
Ryan Le

Reputation: 8412

Material UI doesn't support placeholder for <Select /> directly, cause it's also the label: See: here

Instead you will use <InputLabel>Text</InputLabel>

Something like this:

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

Upvotes: 16

Related Questions