Material UI Autocomplete带图标选中不显示问题求助及解决

问题场景 #

你正在实现一个带文本旁图标的Material UI Autocomplete下拉框，当前代码能正常运行，但选中选项后输入框里无法显示选中内容。你定位到问题出在这段renderInput代码：

renderInput={params => ( 
  <Fragment> 
    <TextField {...params} variant="outlined" label="Select Account" placeholder="Favorites" margin="normal" fullWidth /> 
  </Fragment> 
)}

而且你发现，如果移除getOptionLabel里的图标渲染逻辑，选中的文本就能正常显示。

问题根源 #

这是因为你混淆了getOptionLabel和renderOption的职责！getOptionLabel的核心作用是返回选项对应的纯文本字符串，Autocomplete依赖这个值来同步输入框显示内容、做搜索匹配等。如果你在getOptionLabel里返回JSX（比如图标组件），它本质是一个React元素而非纯文本，Autocomplete无法正确解析并展示在输入框中。

正确解决方案 #

我们需要把图标+文本的渲染逻辑拆分到renderOption中，让getOptionLabel只返回纯文本内容——这样既能在下拉选项里显示图标，选中后输入框也能正常展示文本。

下面是修正后的完整示例代码：

import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import { Fragment } from 'react';

const accountOptions = [
  { name: 'Personal Account', icon: <AccountCircleIcon /> },
  { name: 'Work Account', icon: <AccountCircleIcon /> },
];

export default function IconAutocomplete() {
  return (
    <Autocomplete
      options={accountOptions}
      // 仅返回纯文本，用于输入框显示和内部匹配
      getOptionLabel={(option) => option.name}
      // 自定义下拉选项的渲染，组合图标与文本
      renderOption={(props, option) => (
        <li {...props}>
          {option.icon}
          <span style={{ marginLeft: '8px' }}>{option.name}</span>
        </li>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          label="Select Account"
          placeholder="Favorites"
          margin="normal"
          fullWidth
        />
      )}
    />
  );
}

关键说明 #

• renderOption：负责自定义下拉列表中每个选项的视觉呈现，这里可以自由组合图标、文本、样式等元素。
• getOptionLabel：必须返回纯字符串，用于Autocomplete内部的状态同步、搜索过滤，以及选中后输入框的文本展示。

这样调整后，下拉选项会显示带图标的内容，选中选项后输入框也能正常展示对应的文本啦！

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