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.
Javascript
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:
