How to add function to the clear button icon in Material UI Autocomplete ?
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
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() {
const close = document.getElementsByClassName(
"MuiAutocomplete-clearIndicator"
)[0];
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
Share your thoughts in the comments
Please Login to comment...