Select with value="" doesn't show MenuItem

[stackworx]

Select with value="" doesn't show MenuItem

[MathiasKandelborg]

Hi, I was just checking the repo for examples on the Select component because I'm lazy; and stumbled upon this.

There's a really easy fix to this 'problem' actually. It's a MUI feature where you can set the select component to display fields with empty values or keep the content even if there's no value.

All we need to do in order to display items with no values is set the boolean displayEmpty to true. With formik, you do it on the Field component, as it passes those specific props on. Here's the edited Field
component

You can read more about the props specific to Select here: https://material-ui.com/api/select/#props

The MUI components can be quite tricky sometimes, so be sure read their docs when using their components. The docs are really great (especially the examples) and something I have to reference often even though I've used MUI a bunch.

[MikeSuiter]

@MathiasKandelborg That's for the tip and that works. This was working properly a while ago but we have switched from redux-form to Formik (and of course Formik MUI) and updated MUI itself several times since then. I don't know if MUI added this during that time or something with redux-form was making it work, or ??? Anyway it's working again so I'm good!

[MikeSuiter]

One other thing I just discovered in case anyone else comes to this issue. If you're using an <InputLabel> you need to add shrink prop to keep it form putting the label over None in the select.

      <FormControl className={classes.formControl}>
        <InputLabel shrink htmlFor="age-label-placeholder">
          Age
        </InputLabel>
        <Select
          value={state.age}
          onChange={handleChange}
          input={<Input name="age" id="age-label-placeholder" />}
          displayEmpty
          name="age"
          className={classes.selectEmpty}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Label + placeholder</FormHelperText>
      </FormControl>