Shadow DOM中ag-grid列过滤器的Esc、Tab等按键事件失效问题

数据老陈

2026-6-28

Shadow DOM中AG-Grid默认列过滤器Esc键失效的解决办法

给Shadow根节点手动绑定Esc键监听
Shadow DOM的事件不会向外冒泡，AG-Grid默认的键盘事件没覆盖这个场景。可以直接给Shadow根加监听，触发Esc时关闭过滤器：

// 获取AG-Grid所在的Shadow根节点
const shadowRoot = document.querySelector('#你的AG-Grid容器ID').shadowRoot;

shadowRoot.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    const gridApi = 你的GridOptions实例.api;
    // 获取当前聚焦的表头列ID，拿到对应过滤器实例
    const focusedColId = gridApi.getFocusedHeaderCell().colId;
    const activeFilter = gridApi.getFilterInstance(focusedColId);
    
    if (activeFilter) {
      activeFilter.setModel(null); // 清空过滤条件
      gridApi.onFilterChanged();
      gridApi.hideFilterMenu(); // 关闭过滤器面板
    }
  }
});

借助AG-Grid的过滤器打开事件绑定监听
用AG-Grid自带的onFilterOpened钩子，只在过滤器打开时绑定监听，避免全局冗余：

const gridOptions = {
  // 其他配置项...
  onFilterOpened: (params) => {
    const filterWrapperRoot = params.column.getColumnMenuWrapperElement().getRootNode();
    if (filterWrapperRoot instanceof ShadowRoot) {
      const handleEscPress = (e) => {
        if (e.key === 'Escape') {
          params.api.hideFilterMenu();
          // 用完就移除监听，防止重复绑定
          filterWrapperRoot.removeEventListener('keydown', handleEscPress);
        }
      };
      filterWrapperRoot.addEventListener('keydown', handleEscPress);
    }
  }
};