CODEWITHSUNDEEP
javascriptreactjsautocompletematerial-ui
Briar
Briar

Reputation: 367

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.

enter image description here

Upvotes: 17

Views: 18593

Answers (6)

KiwiKilian
KiwiKilian

Reputation: 1259

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.

Upvotes: 17

Caroline
Caroline

Reputation: 79

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

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

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

Upvotes: 7

hakan-dev
hakan-dev

Reputation: 41

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.

Upvotes: 1

Hari Hara Sudan
Hari Hara Sudan

Reputation: 29

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/

Upvotes: 1

hgb123
hgb123

Reputation: 14881

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" />
  )}
/>

enter image description here

Upvotes: 6

Antonio Erdeljac
Antonio Erdeljac

Reputation: 3244

You can use the IconComponent prop from the Select API documentation

Try doing something like this:

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

Upvotes: 0

Related Questions