How to Use and Remove the MUI Autocomplete Clear Button

The Autocomplete component is useful for giving the user limited options to select from. When a choice is selected it populates an Input subcomponent. Autocomplete has a ‘clear’ button for removing the selected choice.

In this post we will:

• Add a custom clear event handler
• Style the clear button
• Remove the clear button

The clear button is only visible on hover of the Input (by default).

Full code for this tutorial is in the Resources section.

Here’s a YouTube video version of this post or watch below:

MUI Autocomplete Clear Button Event

In MUI, most events are available for custom handling through the component API. However, the Autocomplete API does not directly have a clear event or onClear prop (There is a solution, keep reading).

Here’s the TypeScript error I get when I try to add onClear:

The solution: when the clear button is clicked, the onChange handler is fired. We can use this handler for any custom handling of the clear event.

const handleChange = (event: React.SyntheticEvent<Element, Event>, value: trailData | null) => {
    console.log(value)
}

<Autocomplete onChange={handleChange} />

In the above code, I log the new value onChange. Notice my TypeScript typing of the value prop.

Style MUI Autocomplete Clear Button

I decided the “cancel” button in the TextField Input (it only shows on hover) should also be styled blue. In the same class I added the following:

tfStyle: {
  "& .MuiButtonBase-root.MuiAutocomplete-clearIndicator": {
    color: "blue",
    visibility: "visible"
  }
}

Notice how even the indicator has a specific class applied by Material-UI since it is inside the Autocomplete.

Also, you can swap the tooltip text that appears on hover with the clearText prop.

MUI Autocomplete Clear Icon

You can replace the clear icon with a custom icon by using the clearIcon prop.

Here’s example code:

<Autocomplete clearIcon={<HighlightOffIcon/>} />

Notice that the clearIcon prop requires a value of type node.

Remove MUI Autocomplete Clear Button

The ‘Clear’ Button can be removed by using the disableClearable prop:

<Autocomplete disableClearable />

With this prop enabled, the clear button is no longer rendered as part of the Autocomplete Input’s endAdornment element.

You might want to disable the clear button if you enable the clearOnEscape prop. This will clear a value that was selected while the Autocomplete is in a focus state. It will not clear a value that was previously selected.

Adding a clear button to the Select component is more challenging.

Resources

You can use MUI’s ClickAwayListener to create your own Autocomplete.

MUI Autocomplete API Docs

import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import HighlightOffIcon from "@mui/icons-material/HighlightOff";

interface trailData {
  name: string;
  state: string;
}

const tfStyle = {
  "& .MuiButtonBase-root.MuiAutocomplete-clearIndicator": {
    color: "blue",
    visibility: "visible",
  },
};

const handleChange = (
  event: React.SyntheticEvent<Element, Event>,
  value: trailData | null
) => {
  console.log(value);
};

export default function ClearAutocomplete() {
  return (
    <Autocomplete
      onChange={handleChange}
      options={myTrails}
      //disableClearable
      //clearOnEscape
      //clearIcon={<HighlightOffIcon/>}
      id="autocomplete-1"
      getOptionLabel={(option) => `${option.name}: ${option.state}`}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            variant="outlined"
            label="Name: State"
            sx={tfStyle}
          />
        );
      }}
      sx={{ mb: 2, minWidth: 400 }}
    />
  );
}

const myTrails = [
  {
    name: "Eagle Mountain Lake",
    state: "Texas",
  },
  {
    name: "Inks Lake Woodland Trail",
    state: "Texas",
  },
  {
    name: "Tanyard Creek Loop",
    state: "Arkansas",
  },
  {
    name: "Turner Falls Park",
    state: "Oklahoma",
  },
];