Inovua ReactDataGrid列筛选菜单单次点击失效及程序化打开问题求助

问题原因 #

1. 内部状态不同步：选择筛选类型后，组件内部维护的filterMenuOpen状态未正确重置为false，导致后续第一次点击被判定为“关闭菜单”操作，第二次点击才触发打开。
2. 自定义图标事件冲突：自定义筛选图标时，若在onClick中阻止了事件冒泡（e.stopPropagation()）或默认行为（e.preventDefault()），会干扰组件原生的菜单触发逻辑。
3. 焦点残留问题：筛选菜单关闭后，筛选图标未重新获取焦点，导致第一次点击仅触发焦点获取，第二次才触发菜单打开。

修复单次点击打开菜单 #

1. 修正自定义图标事件处理 #

确保自定义筛选图标的点击事件不阻止原生事件传递：

// 错误示例：阻止了事件冒泡
const BadFilterIcon = () => (
  <span onClick={(e) => {
    e.stopPropagation(); // 这会干扰组件原生逻辑
    // 自定义操作
  }}>🔍</span>
);

// 正确示例：保留原生事件传递
const CorrectFilterIcon = ({ column }) => (
  <span onClick={() => {
    // 仅添加自定义逻辑，不阻止事件冒泡
  }}>🔍</span>
);

2. 强制同步菜单状态 #

在筛选类型变更后，手动调用API关闭菜单，确保状态重置：

const handleFilterChange = ({ column }) => {
  const gridApi = gridRef.current.getGridApi();
  // 筛选完成后关闭菜单，重置状态
  gridApi.closeFilterMenu(column.id);
};

// 在组件中传入回调
<ReactDataGrid
  ref={gridRef}
  onFilterChange={handleFilterChange}
  // 其他配置
/>

3. 重置图标焦点（可选） #

若存在焦点残留问题，可在菜单关闭后手动让筛选图标获取焦点：

const CustomFilterIcon = ({ column }) => {
  const iconRef = useRef(null);

  useEffect(() => {
    const gridApi = gridRef.current.getGridApi();
    const handleMenuClose = ({ column: targetColumn }) => {
      if (targetColumn.id === column.id) {
        iconRef.current.focus();
      }
    };
    gridApi.addEventListener('filterMenuClose', handleMenuClose);
    return () => gridApi.removeEventListener('filterMenuClose', handleMenuClose);
  }, [column.id]);

  return <span ref={iconRef} tabIndex={0}>🔍</span>;
};

程序化打开筛选菜单 #

通过Grid API直接控制菜单显示，可作为临时解决方案：

步骤1：获取Grid实例引用 #

const gridRef = useRef(null);

<ReactDataGrid
  ref={gridRef}
  // 其他配置
/>

步骤2：调用API打开指定列的筛选菜单 #

const openFilterMenu = (columnId) => {
  const gridApi = gridRef.current?.getGridApi();
  if (gridApi) {
    // 先关闭可能已打开的菜单，确保状态正确
    gridApi.closeFilterMenu();
    // 打开目标列的筛选菜单
    gridApi.openFilterMenu(columnId);
    // 若openFilterMenu无效，尝试toggleFilterMenu
    // gridApi.toggleFilterMenu(columnId);
  }
};

步骤3：绑定到自定义图标点击事件 #

const CustomFilterIcon = ({ column }) => (
  <button onClick={() => openFilterMenu(column.id)}>
    🔍
  </button>
);

// 在列配置中使用自定义图标
const columns = [
  {
    name: 'username',
    header: '用户名',
    filterable: true,
    filterMenuIcon: <CustomFilterIcon />
  }
];

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