MUI Autocomplete服务端搜索含空格时无选项显示问题排查

问题现象 #

基于服务端数据实现MUI Autocomplete组件时出现异常：当输入内容包含两个连续空格与字符串'IPH'时，API已返回两个有效选项（可通过控制台确认），但组件仍显示No options。

相关代码 #

import * as React from "react";
import { Autocomplete, TextField } from "@mui/material";
import SearchIcon from "@material-ui/icons/Search";
import InputAdornment from "@material-ui/core/InputAdornment";
import CircularProgress from "@material-ui/core/CircularProgress";

interface Option {
  label: string;
  value: number;
}

interface IProps {
  fetchServerSideOptions?: (inputValue: string) => void;
  loading?: boolean;
  open?: boolean;
  onOpen?: (event: React.SyntheticEvent) => void;
  onClose?: (event: React.SyntheticEvent, reason: string) => void;
  options: Option[];
  selected: Option;
  setSelected: React.Dispatch<React.SetStateAction<Option>>;
}

export default function Auto(props: IProps) {
  const {
    options = [],
    selected = [],
    setSelected,
    open,
    loading,
    onOpen,
    onClose,
    fetchServerSideOptions
  } = props;
  return (
    <Autocomplete
      disableCloseOnSelect
      forcePopupIcon={false}
      options={options}
      value={selected}
      open={open}
      loading={loading}
      onOpen={onOpen}
      onClose={onClose}
      onChange={(_event, value) => setSelected(value)}
      onInputChange={(_event, value) => fetchServerSideOptions?.(value)}
      renderInput={(params) => {
        return (
          <TextField
            {...params}
            placeholder="Select"
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <>
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                  {params.InputProps.startAdornment}
                </>
              ),
              endAdornment: (
                <React.Fragment>
                  {loading ? (
                    <CircularProgress color="inherit" size={20} />
                  ) : null}
                  {params.InputProps.endAdornment}
                </React.Fragment>
              )
            }}
          />
        );
      }}
    />
  );
}

问题根源 #

1. 默认客户端过滤逻辑冲突：MUI Autocomplete默认会对options执行客户端过滤，规则是严格匹配输入值与选项的label。当输入包含连续双空格时，返回的选项label中无对应格式，导致被默认过滤函数剔除。
2. 未禁用客户端过滤：当前代码未配置filterOptions属性，组件自动启用默认过滤，覆盖了服务端返回的有效结果。

修复方案 #

由于服务端已完成数据过滤，客户端无需二次处理，直接禁用客户端过滤逻辑即可：

在Autocomplete组件中添加filterOptions={(options) => options}，让组件直接返回服务端提供的所有选项：

<Autocomplete
  disableCloseOnSelect
  forcePopupIcon={false}
  options={options}
  value={selected}
  open={open}
  loading={loading}
  onOpen={onOpen}
  onClose={onClose}
  onChange={(_event, value) => setSelected(value)}
  onInputChange={(_event, value) => fetchServerSideOptions?.(value)}
  // 禁用客户端过滤，直接返回服务端选项
  filterOptions={(options) => options}
  renderInput={(params) => {
    // 原有renderInput代码保持不变
  }}
/>

优化建议（可选） #

如果服务端是忽略空格数量进行匹配的，可在onInputChange中对输入值做预处理，将连续多空格替换为单个空格，提升用户输入体验：

onInputChange={(_event, value) => {
  const processedValue = value.replace(/\s+/g, ' ');
  fetchServerSideOptions?.(processedValue);
}}

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