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).

Here are more helpful posts:

• How to Add a Clear Button to the MUI Select Component
• How to Style the MUI Autocomplete Component
• How to Customize the Material-UI Autocomplete Component
• MUI Autocomplete Get and Set Values, Default Value, and Add New Option
• The Essential Guide to Material-UI Icon Color
• Add a Clear Button to the MUI TextField and Input Components

Full code for this tutorial is in the Resources section.

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.

Resources

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",
  },
];