Angular中AG Grid按钮列Tab键导航锁定问题求助

问题：在Angular的AG Grid实现中，为了让用户通过Tab键进入单元格并与其中的按钮交互，添加了键盘抑制事件，但用户Tab进入按钮列后，会被“锁定”在按钮上，无法继续使用Tab键导航。表头的Tab导航功能正常，仅单元格内的按钮存在此问题。

相关代码 #

app.component.ts #

import { Component } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import type { ColDef, GridApi, SuppressKeyboardEventParams } from 'ag-grid-community';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';

// 注册所有社区功能
ModuleRegistry.registerModules([AllCommunityModule]);
import { ButtonRendererComponent } from './button-renderer/button-renderer.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AgGridAngular, ButtonRendererComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private gridApi!: GridApi;
  searchText = '';

  rowData = [
    { name: "Dog", type: "Mammal", size: "Medium", speed: "Fast", lifespan: "10-15 years" },
    { name: "Cat", type: "Mammal", size: "Small", speed: "Fast", lifespan: "12-18 years" },
    { name: "Turtle", type: "Reptile", size: "Small", speed: "Slow", lifespan: "50-100 years" },
    { name: "Rabbit", type: "Mammal", size: "Small", speed: "Fast", lifespan: "8-12 years" },
    { name: "Parrot", type: "Bird", size: "Small", speed: "Medium", lifespan: "50-80 years" },
    { name: "Elephant", type: "Mammal", size: "Large", speed: "Slow", lifespan: "60-70 years" }
  ];

  columnDefs: ColDef[] = [
    { field: "name", sortable: true, filter: true },
    { field: "type", sortable: true, filter: true },
    { field: "size", sortable: true, filter: true },
    { field: "speed", sortable: true, filter: true },
    { field: "lifespan", sortable: true, filter: true },
    {
      headerName: '操作',
      field: 'action',
      cellRenderer: ButtonRendererComponent
    }
  ];

  public defaultColDef: ColDef = {
    minWidth: 130,
    suppressKeyboardEvent : this.suppressKeyboardEvent
  };

  onGridReady(params: any) {
    this.gridApi = params.api;
  }


  // 触发弹窗的函数
  sayHello() {
    alert('Hello!');
  }

  GRID_CELL_CLASSNAME = 'ag-cell';

  getAllFocusableElementsOf(el: HTMLElement) {
  return Array.from<HTMLElement>(
    el.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    ),
  ).filter((focusableEl) => {
    return focusableEl.tabIndex !== -1;
  });
}

 getEventPath(event: Event): HTMLElement[] {
  const path: HTMLElement[] = [];
  let currentTarget: any = event.target;
  while (currentTarget) {
    path.push(currentTarget);
    currentTarget = currentTarget.parentElement;
  }
  return path;
}

 suppressKeyboardEvent({ event }: SuppressKeyboardEventParams<any>) {
  const { key, shiftKey } = event;
  const path = this.getEventPath(event);
  const isTabForward = key === 'Tab' && shiftKey === false;
  const isTabBackward = key === 'Tab' && shiftKey === true;
  let suppressEvent = false;

  if (isTabForward || isTabBackward) {
    const eGridCell = path.find((el) => {
      return el.classList?.contains(this.GRID_CELL_CLASSNAME);
    });

    if (!eGridCell) {
      return suppressEvent;
    }

    const focusableChildrenElements = this.getAllFocusableElementsOf(eGridCell);

    const lastCellChildEl = focusableChildrenElements[focusableChildrenElements.length - 1];
    const firstCellChildEl = focusableChildrenElements[0];

    if (focusableChildrenElements.length === 0) {
      return false;
    }

    const currentIndex = focusableChildrenElements.indexOf(document.activeElement as HTMLElement);

    if (isTabForward) {
      const isLastChildFocused = lastCellChildEl && document.activeElement === lastCellChildEl;
      if (!isLastChildFocused) {
        suppressEvent = true;
        event.preventDefault();
        focusableChildrenElements[currentIndex + 1].focus();
      }
    } else {
      const isFirstChildFocused = firstCellChildEl && document.activeElement === firstCellChildEl;
      if (!isFirstChildFocused) {
        suppressEvent = true;
        event.preventDefault();
        focusableChildrenElements[currentIndex - 1].focus();
      }
    }
  }
  return suppressEvent;
}

}

app.component.html #

<ag-grid-angular 
  style="width: 100%; height: 500px;"
  class="ag-theme-quartz"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [pagination]="true"
  [rowSelection]="'single'"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

button-renderer.component.ts #

import { Component } from '@angular/core';

@Component({
  standalone: true,
  templateUrl: './button-renderer.html',
})
export class ButtonRendererComponent {
  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  onClick() {
    alert('Hello');
  }
}

button-renderer.html #

<button (click)="onClick()">点击</button>

问题原因与解决方法 #

核心原因 #

1. 当前suppressKeyboardEvent逻辑只处理了单元格内多元素的焦点切换，没有处理“聚焦到单元格最后/第一个元素时，允许AG Grid接管Tab导航到下一个/上一个单元格”的场景。
2. suppressKeyboardEvent直接绑定到defaultColDef时，存在this指向丢失的潜在问题，可能导致组件属性无法正确访问。

修复方案 #

1. 修正函数绑定，确保this指向正确

修改defaultColDef的suppressKeyboardEvent绑定方式：

public defaultColDef: ColDef = {
  minWidth: 130,
  suppressKeyboardEvent: (params) => this.suppressKeyboardEvent(params)
};

2. 更新suppressKeyboardEvent逻辑，处理跨单元格导航

修改后的函数会在聚焦到单元格最后一个可聚焦元素时，允许AG Grid处理Tab键，跳转到下一个单元格；聚焦到第一个元素时，允许处理Shift+Tab键，回到上一个单元格：

suppressKeyboardEvent({ event, api }: SuppressKeyboardEventParams<any>) {
  const { key, shiftKey } = event;
  const isTabForward = key === 'Tab' && !shiftKey;
  const isTabBackward = key === 'Tab' && shiftKey;
  let suppressEvent = false;

  if (isTabForward || isTabBackward) {
    const path = this.getEventPath(event);
    const eGridCell = path.find(el => el.classList?.contains(this.GRID_CELL_CLASSNAME));
    
    if (!eGridCell) return suppressEvent;

    const focusableChildren = this.getAllFocusableElementsOf(eGridCell);
    if (focusableChildren.length === 0) return false;

    const currentEl = document.activeElement as HTMLElement;
    const currentIndex = focusableChildren.indexOf(currentEl);

    if (isTabForward) {
      // 若当前是单元格最后一个可聚焦元素，允许AG Grid跳转到下一个单元格
      if (currentEl === focusableChildren[focusableChildren.length - 1]) {
        suppressEvent = false;
      } else {
        // 否则在单元格内切换焦点
        suppressEvent = true;
        event.preventDefault();
        focusableChildren[currentIndex + 1].focus();
      }
    } else {
      // 若当前是单元格第一个可聚焦元素，允许AG Grid跳转到上一个单元格
      if (currentEl === focusableChildren[0]) {
        suppressEvent = false;
      } else {
        suppressEvent = true;
        event.preventDefault();
        focusableChildren[currentIndex - 1].focus();
      }
    }
  }
  return suppressEvent;
}

3. 额外优化按钮焦点属性

给按钮显式设置tabindex="0"，确保它能被正确纳入浏览器焦点序列：

<button (click)="onClick()" tabindex="0">点击</button>

修改完成后，用户Tab进入单元格按钮后，再次按Tab即可正常导航到下一个单元格，Shift+Tab也能回到上一个单元格，同时保留了单元格内多元素的焦点切换能力。

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