MUI Autocomplete组件筛选功能失效求助：输入内容无过滤效果

问题原因 #

你的代码存在两个核心问题：

1. value类型与选项类型不匹配：value是字符串（row.client_id），但options是对象数组，Autocomplete无法正确关联输入文本与选项的匹配逻辑。
2. freeSolo属性的适配问题：开启freeSolo后，默认筛选逻辑未适配「字符串value + 对象选项」的组合，导致输入时无法正确过滤选项。

解决方案 #

方案一：修正value类型为对象（推荐，符合组件设计） #

将value改为props.clientDetails中对应的对象，并添加isOptionEqualToValue函数判断选项与value是否相等：

<Autocomplete
  disabled={row.group_mapping_id && !('editClicked' in row)}
  // 匹配对应client_id的对象作为value
  value={props.clientDetails.find(item => item.client_id === row.client_id) || null} 
  onChange={(event, newValue) => {
    // 从选中的对象中取出client_id传给回调
    props.onChangeTableInput('client_id', index, newValue?.client_id, row)
  }}
  options={props.clientDetails}
  getOptionLabel={(option) => option.client_id}
  // 自定义选项与value的相等判断逻辑
  isOptionEqualToValue={(option, value) => option.client_id === value.client_id}
  style={{width: '120px'}}
  disableClearable
  renderInput={(params) => <TextField {...params} 
                variant='outlined'
                inputProps={{
                  ...params.inputProps,
                  autoComplete: "disabled",
                  type: 'search'
                }} />}
/>

如果不需要允许用户输入自定义值，可以直接移除freeSolo属性，组件会自动按输入文本筛选选项。

方案二：保留freeSolo并自定义筛选逻辑 #

如果必须允许用户输入非选项中的自定义字符串，需自定义filterOptions实现正确的筛选逻辑：

<Autocomplete
  disabled={row.group_mapping_id && !('editClicked' in row)}
  freeSolo
  value={row.client_id} 
  onChange={(event, newValue) => props.onChangeTableInput('client_id', index, newValue, row)}
  options={props.clientDetails}
  getOptionLabel={(option) => {
      if (typeof option === 'string') {
         return option;
      }
      return option.client_id;
  }}
  // 自定义筛选：匹配输入文本与选项的client_id
  filterOptions={(options, state) => {
    const inputValue = state.inputValue.toLowerCase();
    return options.filter(option => {
      const label = typeof option === 'string' ? option : option.client_id;
      return label.toLowerCase().includes(inputValue);
    });
  }}
  // 自定义选项与value的相等判断
  isOptionEqualToValue={(option, value) => {
    if (typeof option === 'string') {
      return option === value;
    }
    return option.client_id === value;
  }}
  style={{width: '120px'}}
  disableClearable
  renderInput={(params) => <TextField {...params} 
                variant='outlined'
                inputProps={{
                  ...params.inputProps,
                  autoComplete: "disabled",
                  type: 'search'
                }} />}
/>

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