React: Show MUI Autocomplete freeSolo with drop-down arrow-CodePudding

I am new to MUI, so need a little help.

I want to use <Autocomplete freeSolo ...> that shows a dropdown arrow icon like it were a combo-box mode.

Looks like popupIcon and forcePopupIcon props are being ignored in freeSolo mode.

Thanks!

CodePudding user response：

You can add your icon in renderInput prop of Autocomplete. Actually Autocomplete component is just a wrapper around Textfield component. In MUI V5, You can add any icon at the start or end of it by targeting Textfield inside it. For your case check the example below.

import Autocomplete from '@mui/material/Autocomplete'
import InputAdornment from '@mui/material/InputAdornment'
import TextField from '@mui/material/TextField'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'


<Autocomplete
    freeSolo
    options={myOptions}
    renderInput={(params) => (
      <TextField
        {...params}
        label="My label"
        InputProps={{ endAdornment: (
            <InputAdornment position="end">
              <ArrowDropDownIcon />
            </InputAdornment>
          ),
        }}
      />
    )}
  />