MUI Autocomplete freeSolo模式下如何显示下拉箭头图标？

在freeSolo模式下，MUI的Autocomplete会默认隐藏下拉箭头，因为该模式更偏向自由输入场景。要强制显示箭头，可采用以下两种方案：

方案一：自定义输入组件添加图标 #

通过renderInput自定义输入框结构，手动插入下拉箭头图标：

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

<Autocomplete
  freeSolo
  options={['选项1', '选项2', '选项3']}
  renderInput={(params) => (
    <TextField
      {...params}
      label="自由输入+下拉选择"
      variant="outlined"
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <>
            {params.InputProps.endAdornment}
            <InputAdornment position="end">
              <ArrowDropDownIcon />
            </InputAdornment>
          </>
        ),
      }}
    />
  )}
/>

此方法完全不受freeSolo模式限制，还可自定义图标的样式与点击交互逻辑。

方案二：覆盖默认CSS强制显示箭头 #

通过sx属性修改组件默认样式，让原本隐藏的popupIndicator显示：

<Autocomplete
  freeSolo
  options={['选项1', '选项2', '选项3']}
  sx={{
    '& .MuiAutocomplete-popupIndicator': {
      display: 'block !important',
    },
  }}
  renderInput={(params) => <TextField {...params} label="自由输入+下拉选择" variant="outlined" />}
/>

这种方式更简洁，直接激活组件原生的箭头元素，无需额外添加组件。

若需要点击箭头触发下拉框展开，可确保openOnFocus等交互属性配置正确，或在方案一中给图标绑定点击事件控制下拉框状态。

内容的提问来源于stack exchange，提问作者GRZa