升级ag-grid-react至30.2.1后，Typeahead单元格编辑器回车功能失效

升级AG Grid到30.x版本后，其单元格编辑器的键盘事件处理逻辑发生了变化——默认情况下，回车键会直接触发编辑结束，不会等待React Bootstrap Typeahead完成选中操作，导致onChange未触发、单元格返回空值。

以下是修复方案：

• 阻止AG Grid默认的回车键行为：在编辑器组件中监听键盘事件，按下回车键时先让Typeahead完成选中逻辑，再通知AG Grid结束编辑。
• 手动同步选中值并触发编辑完成：确保Typeahead的选中值正确同步到编辑器状态，在回车键触发时主动调用AG Grid的stopEditing方法。

修改你的编辑器组件代码如下：

import React, { useState, useRef } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import { ICellEditorParams } from 'ag-grid-react';

const TypeaheadEditor = (props: ICellEditorParams) => {
  const [selected, setSelected] = useState<any[]>(props.value ? [props.value] : []);
  const typeaheadRef = useRef<any>(null);

  const handleChange = (selectedItems: any[]) => {
    setSelected(selectedItems);
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.stopPropagation(); // 阻止AG Grid默认处理逻辑
      const activeItem = typeaheadRef.current?.getActiveItem();
      if (activeItem) {
        setSelected([activeItem]);
        // 延迟触发编辑结束，确保状态更新完成
        setTimeout(() => {
          props.stopEditing();
        }, 0);
      }
    }
  };

  const getValue = () => {
    return selected[0] || null;
  };

  return (
    <Typeahead
      ref={typeaheadRef}
      id="typeahead-editor"
      options={props.options}
      selected={selected}
      onChange={handleChange}
      onKeyDown={handleKeyDown}
      autoFocus
      placeholder="搜索选择..."
    />
  );
};

export default TypeaheadEditor;

关键改动说明：

• 用useRef获取Typeahead实例，通过getActiveItem()获取当前高亮的选项
• 按下回车键时，通过e.stopPropagation()拦截AG Grid默认的编辑结束行为
• 手动设置选中值后，延迟调用props.stopEditing()保证状态同步完成
• 确保getValue()方法正确返回选中的第一个值

修改后，回车键选择选项时Typeahead的onChange会正常触发，单元格也能正确获取选中值。

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