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.
6 Answers
Native prop freeSolo may help you
<Autocomplete
id="free-solo-demo"
freeSolo
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField {...params} label="Placeholder" margin="normal" variant="outlined" />
)}
/>
This worked for me, adding the props "popupIcon":
return (
<Autocomplete
freeSolo={false}
popupIcon={""}
...
/>
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.
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/
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.
You can use the IconComponent prop from the Select API documentation
Try doing something like this:
<Select IconComponent={undefined} ... />
Related