AG Grid跳行重渲染失焦后，如何重新获取焦点？

核心思路 #

AG Grid无限行模型加载新行时会重绘DOM，导致网格失去焦点。要让网格重新捕获按键事件，只需主动让网格的核心可聚焦DOM元素重新获取焦点即可，无需全局事件监听器。

具体实现步骤 #

1. 确保网格视口可聚焦
   AG Grid的滚动视口（类名为ag-body-viewport）是稳定的容器元素，默认可能没有tabindex属性，需要手动添加以允许JS触发聚焦：

// 网格初始化完成后执行
const gridViewport = document.querySelector('.ag-root .ag-body-viewport');
if (gridViewport && !gridViewport.hasAttribute('tabindex')) {
  // 设置tabindex为-1：允许JS聚焦，但不会被Tab键选中，不影响页面原有Tab导航
  gridViewport.setAttribute('tabindex', '-1');
}

2. 跳行后触发聚焦
   在你的跳行函数中，执行完滚动/跳行动作后，等待网格完成新行渲染，再聚焦视口。推荐用AG Grid的modelUpdated事件确保渲染完成，避免固定延迟的不确定性：

function jumpToTargetRow(targetIndex) {
  // 执行你的跳行逻辑，比如滚动到指定行
  gridApi.ensureIndexVisible(targetIndex, 'top');

  // 监听网格模型更新事件，确保新行渲染完成后聚焦
  const handleModelUpdate = () => {
    const gridViewport = document.querySelector('.ag-root .ag-body-viewport');
    if (gridViewport) {
      gridViewport.focus();
    }
    // 移除监听，避免重复触发
    gridApi.removeEventListener('modelUpdated', handleModelUpdate);
  };

  gridApi.addEventListener('modelUpdated', handleModelUpdate);
}

备选方案（简单快速） #

如果不需要精确监听渲染完成，也可以用短延迟触发聚焦（适合对时效性要求不高的场景）：

function jumpToTargetRow(targetIndex) {
  gridApi.ensureIndexVisible(targetIndex, 'top');
  
  // 延迟100ms，等待DOM重绘完成
  setTimeout(() => {
    const gridViewport = document.querySelector('.ag-root .ag-body-viewport');
    gridViewport?.focus();
  }, 100);
}

原理说明 #

当视口元素获得焦点后，页面的按键事件会优先传递给该元素，AG Grid内置的按键处理逻辑（如行导航、滚动）会正常捕获事件，不会被页面其他元素拦截。

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