Material UI Autocomplete失去焦点时未触发onChange如何解决？

当启用multiple和freeSolo属性的Material UI Autocomplete组件时，按下回车键会触发onChange事件，但按Tab键离开组件时不会触发，导致用户输入的文本仍保留在输入框中，而Autocomplete的自身状态未更新（仅内部TextField状态更新）。

相关代码如下：

// 按下回车键时触发
function onAddNewItem(e, items) {
  console.log("Validation code goes here");
  setItems(items);
}

// 输入文本时触发
function onInputChange(e, newItem) {
  setInputValue(newItem);
}

return (
  <Autocomplete
    multiple
    freeSolo
    disableClearable
    options={[]}
    value={items}
    onChange={onAddNewItem}
    inputValue={inputValue}
    onInputChange={onInputChange}
    renderInput={(params) => (
      <TextField {...params} error={error} placeholder="Type here" />
    )}
  />
);

请问如何在组件失去焦点时触发onChange事件，或通过其他方式更新Autocomplete的状态？使用onBlur无法解决，因为无法获取Autocomplete更新后的「草稿项」来设置新状态。

解决方法 #

方法一：利用onBlur手动处理输入值

在onBlur事件中，直接基于当前的inputValue判断是否需要添加新项，手动更新状态：

function handleBlur() {
  const trimmedValue = inputValue.trim();
  // 确保输入值非空且未已存在于列表中
  if (trimmedValue && !items.includes(trimmedValue)) {
    setItems([...items, trimmedValue]);
    setInputValue('');
  }
}

// 更新Autocomplete组件，添加onBlur属性
<Autocomplete
  multiple
  freeSolo
  disableClearable
  options={[]}
  value={items}
  onChange={onAddNewItem}
  inputValue={inputValue}
  onInputChange={onInputChange}
  onBlur={handleBlur} // 添加失焦处理
  renderInput={(params) => (
    <TextField {...params} error={error} placeholder="Type here" />
  )}
/>

方法二：调用组件内部close方法触发状态更新

通过useRef获取Autocomplete实例，在失焦时调用组件内部的close方法，触发草稿项的确认逻辑，从而自动调用onChange：

import { useRef } from 'react';

const autoCompleteRef = useRef(null);

function handleBlur() {
  if (autoCompleteRef.current) {
    // 调用close方法，触发组件确认当前输入的项
    autoCompleteRef.current.close();
  }
}

// 更新Autocomplete组件，添加ref和onBlur
<Autocomplete
  ref={autoCompleteRef}
  multiple
  freeSolo
  disableClearable
  options={[]}
  value={items}
  onChange={onAddNewItem}
  inputValue={inputValue}
  onInputChange={onInputChange}
  onBlur={handleBlur}
  renderInput={(params) => (
    <TextField {...params} error={error} placeholder="Type here" />
  )}
/>

说明 #

方法二更贴合Material UI组件的内部逻辑，close方法会自动处理草稿项的转化，无需手动判断输入值是否重复或为空，能直接复用onChange中的验证逻辑。

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