[Autocomplete] closeIcon prop controls the clearIcon
See original GitHub issue- The issue is present in the latest release.
- I have searched the issues of this repository and believe that this is not a duplicate.
Current Behavior 😯
The closeIcon prop is misnamed and corresponds to the icon for clearing the input.
Expected Behavior 🤔
The closeIcon prop to corresponds to the icon for closing the input.
Steps to Reproduce 🕹
https://codesandbox.io/s/mui-autocomplete-mislabeled-closeicon-46kt3?file=/src/App.js:693-5392. (This isn’t the official template because it was complaining about an unrelated dependency not being met.
Steps:
- Import
Autocompletefrom@material-ui/lab - Use the
closeIconprop
Context 🔦
As it relates to MUI I just want the closeIcon prop to correspond to the appropriate end adornment. In practice, I am feeding the Autocomplete with an asynchronous fetch and want to fire the call only when the menu is closed.

Your Environment 🌎
| Tech | Version |
|---|---|
| Material-UI | v4.11.0 |
| React | v16.3.1 |
| Browser | Google Chrome 86 |
| TypeScript | |
| etc. |
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:10 (6 by maintainers)
Top Results From Across the Web
[Autocomplete] closeIcon prop controls the clearIcon #23591
The closeIcon prop is misnamed and corresponds to the icon for clearing the input. Expected Behavior. The closeIcon prop to corresponds to ...
Read more >How to remove Clear button on Autocomplete and show only ...
There is a dedicated prop to disable the Icon. try the prop "disableClearable" on the Autocomplete component it is here in the documentation ......
Read more >Autocomplete API - Material UI - MUI
Name Type Default
options * array
renderInput * func
autoComplete bool false
Read more >How to add function to the clear button icon in Material UI ...
In this article, We are going to add an extra function to the clear button of Material UI Autocomplete. Take Reference to the...
Read more >material-ui autocomplete clear button
'Clear' Override the default text for the clear icon button. For localization purposes, you can use the provided translations. closeIcon: node <CloseIcon ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@oliviertassinari I’ve given that a skim and the
componentsprop would be a very flexible way to achieve the desired outcome. When I’ve more time I’ll give that thread a deeper read.In the meantime, I just had the idea that I could manipulate the
paramspassed in therenderInputprop to achieve the desired outcome for the time being. Before I do that, do you see a better short term fix?@techdev5521 hey there sorry 😅on my side. Didn’t saw the message.