Open In App
Related Articles

How to add function to the clear button icon in Material UI Autocomplete ?

Improve Article
Save Article
Like Article

Material UI is a popular UI component library for React applications, providing a wide range of pre-built components that follow the Material Design guidelines. One of the components offered by Material UI is the Autocomplete component, which allows users to select values from a predefined list or search for specific options. In this article, we will explore how to add a function to the clear button icon in the Material UI Autocomplete component.

The Autocomplete component in Material UI comes with a built-in clear button icon that appears when a value is selected or input text is present. Clicking the clear button icon clears the selected value or the entered text. By default, the clear button only resets the component’s internal state without triggering any custom functionality.

To add a function to the clear button icon, we need to override the default behavior and provide our own implementation.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder, i.e., folder name, move to it using the following command:

cd foldername

Step 3: Install required modules

npm install @material-ui/core
npm install @material-ui/lab

Project Structure: 

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.


import React, { Component } from 'react';
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
class App extends Component {
    constructor(props) {
        this.state = {
            list: [
                { title: "Title 1" },
                { title: "Title 2" },
                { title: "Title 3" },
                { title: "Title 4" },
    componentDidMount() {
        // Take the Reference of Close Button
        const close = document.getElementsByClassName(
        // Add a Click Event Listener to the button
        close.addEventListener("click", () => {
            alert("Add your Own Functionality Here...");
    render() {
        return (
                getOptionLabel={(option) => option.title}
                style={{ width: 300 }}
                renderInput={(params) => (
                    <TextField {...params} label="Combo box" variant="outlined" />
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Last Updated : 22 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials