PrimeNG p-table虚拟滚动下空格键输入与滚动冲突问题求助

问题根源 #

当p-table启用virtualScroll后，虚拟滚动容器会监听keydown事件，处理空格键的滚动逻辑，这个事件会优先于输入框的空格输入事件触发，导致输入空格被拦截。仅用preventDefault无法解决，因为事件冒泡顺序的问题。

可行解决方案 #

方案1：输入框阻止事件冒泡 #

直接在可编辑输入框上添加keydown事件，当按下空格键时阻止事件冒泡，避免虚拟滚动容器捕获到该事件：

1. 模板中给输入框绑定事件：

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td>
      <input type="text" [(ngModel)]="rowData.value" (keydown)="handleInputKeydown($event)" />
      <!-- 若是PrimeNG的p-inputText组件同理： -->
      <!-- <p-inputText [(ngModel)]="rowData.value" (keydown)="handleInputKeydown($event)"></p-inputText> -->
    </td>
  </tr>
</ng-template>

2. 组件中实现事件处理函数：

handleInputKeydown(event: KeyboardEvent): void {
  if (event.key === ' ') {
    event.stopPropagation(); // 阻止事件冒泡到虚拟滚动容器
  }
}

方案2：全局拦截虚拟滚动容器的空格事件 #

如果页面中有多个带虚拟滚动的p-table，可通过全局监听的方式，统一处理这种情况：

1. 在组件初始化时，获取虚拟滚动容器并添加事件监听：

import { AfterViewInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

export class YourComponent implements AfterViewInit {
  @ViewChild('yourTable') table!: Table;

  ngAfterViewInit(): void {
    const virtualScrollContainer = this.table.el.nativeElement.querySelector('.p-virtual-scroll');
    if (virtualScrollContainer) {
      virtualScrollContainer.addEventListener('keydown', (event: KeyboardEvent) => {
        // 判断当前焦点是否在输入类元素中
        const target = event.target as HTMLElement;
        const isInputElement = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
        
        if (event.key === ' ' && isInputElement) {
          event.stopImmediatePropagation(); // 阻止后续事件处理
          event.preventDefault(); // 确保输入框能正常输入空格
        }
      }, true); // 捕获阶段触发，优先于容器的默认事件处理
    }
  }
}

2. 模板中给p-table添加模板引用：

<p-table #yourTable [value]="data" [virtualScroll]="true" [scrollHeight]="'500px'">
  <!-- 表格内容 -->
</p-table>

方案3：修改PrimeNG Table的默认行为（进阶） #

如果上述方案都不满足，可通过扩展PrimeNG的Table组件，重写其虚拟滚动的键盘事件处理逻辑，在处理空格滚动前先判断焦点是否在输入元素中。不过这种方式需要对PrimeNG源码有一定了解，适合需要全局统一修改的场景。

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