Material UI Autocomplete设置clearOnBlur为false仍失焦清空如何解决

clearOnBlur={false}的配置仅对两种输入内容生效：一是和你传入的options数组中某一项匹配的输入值，二是开启自由输入模式后的任意自定义输入值。如果没有开启自由输入，且当前输入内容不在options范围内，组件内置的非法值校验逻辑优先级更高，失焦时会自动清空不匹配的内容，不受clearOnBlur配置影响。

根据你的业务需求二选一即可：

允许用户输入任意内容（不限制必须选择预设选项） #

直接给Autocomplete组件添加freeSolo属性即可，开启后组件不会校验输入内容是否匹配预设选项，失焦时会自动保留所有输入内容，示例代码：

<Autocomplete
  freeSolo
  clearOnBlur={false}
  options={yourOptions}
  renderInput={(params) => <TextField {...params} label="选项" />}
/>

仅允许选择预设选项，但需要保留用户的检索关键词失焦不消失 #

通过inputValue和onInputChange受控管理输入框内容，绕过组件默认的非法值清空逻辑即可，示例代码：

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

function YourComponent() {
  const [inputValue, setInputValue] = useState('');
  const [selectedValue, setSelectedValue] = useState(null);

  return (
    <Autocomplete
      value={selectedValue}
      onChange={(_, newValue) => setSelectedValue(newValue)}
      inputValue={inputValue}
      onInputChange={(_, newInputValue) => setInputValue(newInputValue)}
      clearOnBlur={false}
      options={yourOptions}
      renderInput={(params) => <TextField {...params} label="选项" />}
    />
  );
}

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