[Autocomplete] closeIcon prop controls the clearIcon

[techdev5521]

• 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.

Your Environment 🌎

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

[eps1lon]

Thanks for the report.

Confused me as well. I guess clearIcon would be more appropriate.

[akhilmhdh]

@eps1lon Hey there, can I fix this

[techdev5521]

Tangentially related, would it be possible to also expose the close icon via props?

[akhilmhdh]

@techdev5521 Do you mean close in sense closing the list. If that's the case I think its fired on

Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"remove-option"`, `"blur"
and exposed as onClose and I think there is no icon for that.

[techdev5521]

@akhilmhdh I mean exposing the close icon for being overridden in the same way the clear icon is exposed now.

[oliviertassinari]

I mean exposing the close icon for being overridden in the same way the clear icon is exposed now.

@techdev5521 What do you mean by "close icon"? Are you referring to the drop-down open/close icon?

[techdev5521]

@oliviertassinari Sorry for being vague, yes that is exactly what I mean :)

(Also, thanks @akhilmhdh for opening that PR! Looking at what you did makes it easy for me to address similar issues in the future!)

[akhilmhdh]

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

[oliviertassinari]

@techdev5521 Thanks for the clarification. Maybe, as a follow-up, we should replace these two props with a components={{ ClearIcon, DropdownIcon }} one, allowing to inject components deep in the rendering tree: #21453.

[techdev5521]

@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?