Material-UI Autocomplete：键盘操作时onChange事件未触发问题

问题根源 #

你在onHighlightChange中直接通过setInput(option)更新了Autocomplete的value状态，导致组件认为当前已经选中了该选项。当用户按回车键时，组件检测到选中的选项和当前value一致，因此不会触发onChange事件。

includeInputInList的作用（与你的场景无关） #

这个属性的功能是将用户在输入框中手动输入的内容作为一个额外选项添加到下拉列表中，方便用户选择自定义输入值，和你需要的「键盘高亮时同步输入框内容」需求不匹配，所以无法解决你的问题。

正确实现方案 #

需要区分Autocomplete的两个核心状态：

• value：最终选中的选项（对应onChange触发时的值）
• inputValue：输入框中显示的文本内容（对应onInputChange触发时的值）

修改代码，分离这两个状态，在键盘高亮时更新inputValue而非直接设置value，这样回车时组件会将inputValue匹配的选项设置为value，从而触发onChange：

export default function Autocompleter() {
  // 分离选中值和输入框显示值
  const [selectedValue, setSelectedValue] = React.useState(null);
  const [inputValue, setInputValue] = React.useState('');

  const handleInputChange = (event, newInputValue, reason) => {
    console.log('On input change triggered:', newInputValue);
    setInputValue(newInputValue);
  };

  const handleOnChange = (event, value, reason) => {
    console.log('On change triggered! ', value);
    setSelectedValue(value);
  };

  const handleHighlightChange = (event, option, reason) => {
    if (option && reason === 'keyboard') {
      // 高亮时更新输入框显示的文本，而非直接设置选中值
      setInputValue(option.label);
    }
  };

  const handleFilterOptions = (currentOptions) => currentOptions;

  const handleGetOptionsLabel = (option) => {
    return option.label;
  };

  return (
    <Autocomplete
      id="combo-box-demo"
      freeSolo={true}
      value={selectedValue}
      inputValue={inputValue}
      onChange={handleOnChange}
      onInputChange={handleInputChange}
      options={top100Films}
      isOptionEqualToValue={(option, value) => option.label === value.label}
      onHighlightChange={handleHighlightChange}
      getOptionLabel={handleGetOptionsLabel}
      filterOptions={handleFilterOptions}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

关键说明 #

1. 键盘上下箭头高亮选项时，仅更新inputValue，让输入框显示对应选项的文本，此时value仍为未选中状态
2. 按回车键时，Autocomplete会自动将inputValue匹配的选项设置为value，触发onChange事件
3. freeSolo模式下，inputValue和value是独立状态，必须分别控制才能实现你要的交互逻辑

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