Add clear button to select

[dashty94]

How to add a clear button to the Select component?

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Example code

const options = [{name: 'a', value: '1'}, {name: 'b', value: '2'}]

<Select> {options.map((option, index) => <ListItem value={option.value} key={index} > <ListItemText primary={option.name} /> </ListItem> )} </Select>

[michal-perlakowski]

You can add an option with value="". Selecting this option will clear the Select component.

[dashty94]

You can add an option with value="". Selecting this option will clear the Select component.

I am looking for a better way to clear the selected values, more like the clearable option of the Autocomplete component.

[eps1lon]

Thanks for the feedback.

Closing this in favor of #26356. Both issues look for an API to add secondary actions to the Select. In this issue: a clear button. In the referenced issue: a close button.

[itayperry]

Hi everyone ✨

#26356 --> This issue doesn't regard a clear button but an extra "clear option". The intention was to add an (x) button like in <Autocomplete/> in order to clear the value.

Example:

Therefore, I think this issue shouldn't have been closed :)

[nick-catalist]

Agreeing with the above post! Being able to "X" out a Select would be very useful in many scenarios.

[HasanMothaffar]

+1. It would indeed be helpful if the Select component provided a built in "X" button.

[AlbertoTonegari]

Yes, we need this. It's the best approach to have a clearable prop like on Autocomplete.

[Phillbaska]

A partial workaround for this is to add an endAdornment:

<Select
            defaultValue=""
            multiple
            label="Sales Month"
            value={salesMonth}
            onChange={handleChange}
            endAdornment={
              salesMonth.length > 0 && (
                <InputAdornment sx={{ marginRight: "10px" }} position="end">
                  <IconButton
                    onClick={() => {
                      setSalesMonth([]);
                    }}
                  >
                    <ClearIcon></ClearIcon>
                  </IconButton>
                </InputAdornment>
              )
            }
          >
            <MenuItem value="">Select</MenuItem>
            <MenuItem value="January">January</MenuItem>
            <MenuItem value="February">February</MenuItem>
            <MenuItem value="March">March</MenuItem>
            <MenuItem value="April">April</MenuItem>
            <MenuItem value="May">May</MenuItem>
            <MenuItem value="June">June</MenuItem>
</Select>

The only problem is then the original adornment arrow does not appear to respond when clicked, however if clicking the body of the field the value list appears.

[TamirHen]

For people still looking at @Phillbaska's workaround you can change the sx to:

<InputAdornment
    sx={{ position: "absolute", right: 32 }}
    position="end"
>

and the arrow will work as expected.