如何解决点击外部区域时Material-UI Autocomplete筛选条件被重置的问题

问题根因 #

该问题是Material-UI Autocomplete默认行为导致：非受控输入模式下，组件失焦会自动清空输入框内容，触发筛选条件重置，选项列表回到初始排序状态。安卓旁白场景下，焦点定位和选项列表更新不同步，就会出现选中选项不匹配的无障碍故障。

修复方案 #

将输入框文本改为受控模式，同时关闭失焦清空输入的默认配置即可，修改后代码如下：

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function App() {
  // 存储最终选中的选项值
  const [selectedValue, setSelectedValue] = useState();
  // 存储用户输入的筛选文本
  const [inputValue, setInputValue] = useState('');

  return (
    <Autocomplete
      options={["a", "b", "c"]}
      value={selectedValue}
      onChange={(_, newValue) => setSelectedValue(newValue)}
      // 受控绑定输入框筛选文本
      inputValue={inputValue}
      onInputChange={(_, newInputValue) => setInputValue(newInputValue)}
      // 核心配置：失焦不清除输入内容，保留筛选条件
      disableClearOnBlur={true}
      renderInput={(params) => (
        <TextField {...params} label="选项" />
      )}
    />
  );
}

版本兼容说明 #

如果你使用的是Material-UI v4版本，将disableClearOnBlur={true}替换为clearOnBlur={false}即可，配置效果完全一致。

效果说明 #

修改后无需开启自动选择功能，完全符合业务场景要求：失焦时筛选条件不会被清空，下拉列表保持筛选后的排序，安卓旁白功能下选中的选项和筛选结果匹配，无障碍故障解决。

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