Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Prerequisites:

Approach:

To add a function to the clear button icon, we need to override the default behavior and provide our own implementation. 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.

Steps to create 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 the required modules

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

Project Structure:

The updated dependencies in package.json file will look like.

"dependencies": {
"@material-ui/core": "^4.12.4",
"@material-ui/lab": "^4.0.0-alpha.61",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example: This example implements a function to the clear button icon in MUI autocomplete.

Javascript




// Filename - App.js
 
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) {
        super(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(
            "MuiAutocomplete-clearIndicator"
        )[0];
 
        // Add a Click Event Listener to the button
        close.addEventListener("click", () => {
            alert("Add your Own Functionality Here...");
        });
    }
 
    render() {
        return (
            <Autocomplete
                options={this.state.list}
                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 : 10 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads