question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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:

  1. Import Autocomplete from @material-ui/lab
  2. 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.

Screen Shot 2020-11-18 at 12 05 30 AM

Your Environment 🌎

Tech Version
Material-UI v4.11.0
React v16.3.1
Browser Google Chrome 86
TypeScript
etc.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
techdev5521commented, Nov 19, 2020

@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 the renderInput prop to achieve the desired outcome for the time being. Before I do that, do you see a better short term fix?

1reaction
akhilmhdhcommented, Nov 19, 2020

@techdev5521 hey there sorry 😅on my side. Didn’t saw the message.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found