Remove Autocomplete Drop-Down Arrow

Question

Is there a way to remove the drop-down arrow icon from the material-ui Autocomplete react component?

This is what mine looks like now, I want to get rid of the blue arrow and instead have text drop-down automatically as I type.

Answer 1

In MUI v5 there is a clean option to hide the Dropdown/PopUp Icon via the forcePopupIcon prop.

<Autocomplete
  forcePopupIcon={false}
  // other props...
/>

This is much superior to the freeSolo option as it doesn't change the behavior of the AutoComplete. It also completely removes the InputAdornment instead of hiding it with CSS solutions.

Answer 2

This worked for me, adding the props "popupIcon":

return (
    <Autocomplete
      freeSolo={false}
      popupIcon={""}
      ...
    />

https://material-ui.com/api/autocomplete/