[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
Autocomplete
from@material-ui/lab
- Use the
closeIcon
prop
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 FreeTop 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
Top GitHub Comments
@oliviertassinari I’ve given that a skim and the
components
prop 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
params
passed in therenderInput
prop 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.