'Remove Autocomplete Drop-Down Arrow

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.

Solution 1:^[1]

One answer specified to use: <Select IconComponent={undefined} ... />. However, this didn't work for me.

Instead <Select IconComponent="none" ... /> worked, but it gives a <none> tag in the HTML and the browser gives a warning.

Solution 2:^[2]

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

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

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

Solution 3:^[3]

Adding freeSolo attribute to Autocomplete enables us to enter the values which are not in the dropdown options.

Incase if you need the only the values in dropdown to be entered in the input, we can achieve this overriding the CSS Property of the Autocomplete component like this

const autocompleteStyles = AutocompleteStyles();
return (
    <Autocomplete
      classes={autocompleteStyles}
      freeSolo
      options={top100Films.map((option) => option.title)}
      renderInput={(params) => (
         <TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
      )}
    />
) 
const AutocompleteStyles = makeStyles(theme => ({
    endAdornment: {
        display: 'none'
    }
}))

Refer this material ui link for more details. https://material-ui.com/api/autocomplete/

Solution 4:^[4]

You can use the IconComponent prop from the Select API documentation

Try doing something like this:

<Select IconComponent={undefined} ... />

Solution 5:^[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Emil Hemdal
Solution 2	Caroline
Solution 3
Solution 4	Antonio Erdeljac
Solution 5	KiwiKilian

'Remove Autocomplete Drop-Down Arrow

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]