Angular 9中ag-Grid按下Shift+Enter时焦点异常选中两个单元格的问题

问题根源 #

你遇到的多余焦点问题，核心原因是没有拦截ag-Grid对Shift+Enter的默认行为：你启用了enterMovesDownAfterEdit，ag-Grid自带的Enter/Shift+Enter逻辑会自动触发焦点移动，同时你手动调用startEditingCell，两者叠加导致多个单元格被意外聚焦。另外原代码中rowIndex - 2的计算是为了抵消默认行为的偏移，但这反而让逻辑变得混乱，加剧了问题。

修复步骤 #

1. 替换事件类型：把(keyup)换成(cellKeyDown)——这个事件能在ag-Grid处理按键前拦截，更适合阻止默认行为。
2. 彻底阻止默认行为：处理Shift+Enter时，调用e.preventDefault()和e.stopPropagation()，完全禁用ag-Grid的默认按键逻辑。
3. 修正行索引计算：上移一行只需用当前行索引 - 1，因为默认行为已经被阻止，不需要额外偏移补偿。
4. 清理当前编辑状态：启动新单元格编辑前，先调用stopEditing()确保当前编辑状态被完全清理。

修改后的代码 #

HTML部分

<ag-grid-angular 
  #agGrid 
  style="width:100%; height:100vh" 
  id="myGrid" 
  class="ag-theme-balham-dark" 
  [columnDefs]="columnDefs" 
  [defaultColDef]="defaultColDef" 
  [singleClickEdit]="true" 
  [enterMovesDown]="true" 
  [enterMovesDownAfterEdit]="true" 
  [autoGroupColumnDef]="autoGroupColumnDef" 
  [treeData]="true" 
  [rowData]="rowData" 
  [groupDefaultExpanded]="groupDefaultExpanded" 
  [getDataPath]="getDataPath" 
  (cellValueChanged)="onCellValueChanged($event)" 
  <!-- 替换keyup为cellKeyDown -->
  (cellKeyDown)="onCellKeyDown($event)" 
  (gridReady)="onGridReady($event)" 
></ag-grid-angular>

组件TS部分

onCellKeyDown(e: KeyboardEvent & { column: any; rowIndex: number }) {
  // 仅对Cost列执行自定义按键逻辑
  const focusedCell = this.gridApi.getFocusedCell();
  if (!focusedCell || focusedCell.column.colId !== 'Cost') return;

  if (e.key === 'Enter') {
    if (e.shiftKey) {
      // 阻止ag-Grid默认的Shift+Enter行为
      e.preventDefault();
      e.stopPropagation();

      // 先终止当前单元格的编辑状态
      this.gridApi.stopEditing();

      const targetRowIndex = focusedCell.rowIndex - 1;
      // 确保目标行索引有效（避免越界）
      if (targetRowIndex >= 0) {
        this.gridApi.startEditingCell({
          rowIndex: targetRowIndex,
          colKey: 'Cost'
        });
      }
    }
    // 普通Enter逻辑可保留，因为你已启用enterMovesDownAfterEdit，默认行为会正常处理
    // 若需完全自定义普通Enter，可参照Shift+Enter的逻辑添加阻止默认+手动编辑代码
  }
}

额外说明 #

• 新增了Cost列的判断，确保自定义逻辑只作用于目标列，不影响其他列的正常操作。
• 增加了行索引有效性检查，防止上移到负数索引引发错误。
• 使用cellKeyDown而非keyup，因为keyup会在ag-Grid执行完默认行为后触发，此时已无法阻止多余焦点的产生。

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