PrimeNG p-table初始化时表头莫名获焦高亮问题求助

现象描述 #

使用PrimeNG的p-table组件嵌入模态框内，通过pSortableColumn实现列排序功能。模态框打开时，表头列自动显示类似点击获焦的蓝色边框，但实际并未点击表头。全局移除:focus样式会导致用户点击排序时也失去高亮效果，不符合需求。

原因分析 #

1. 浏览器焦点自动转移机制：模态框打开后，浏览器默认会将焦点定位到模态框内第一个可交互元素。p-sortable-column对应的<th>元素是可点击的交互元素，因此会被自动设置为焦点状态，触发PrimeNG内置的:focus样式。
2. PrimeNG样式设计：p-sortable-column的:focus样式与点击时的高亮样式一致，导致视觉上混淆了“自动获焦”和“用户点击”两种状态。

可行解决方案 #

方案1：手动转移焦点到模态框非表头元素 #

通过模态框的显示事件，将焦点手动设置到其他元素（比如关闭按钮、模态框容器），避免表头自动获焦。

示例代码（以p-dialog为例）：

// 组件类中定义事件处理函数
onModalShow() {
  const closeBtn = document.querySelector('.p-dialog-header-close');
  if (closeBtn) {
    (closeBtn as HTMLElement).focus();
  }
}

模板中绑定事件：

<p-dialog (onShow)="onModalShow()">
  <!-- 你的p-table代码 -->
</p-dialog>

方案2：利用:focus-visible伪类区分状态 #

使用CSS的:focus-visible伪类，只保留用户通过键盘导航获焦时的高亮，移除程序自动获焦的边框。这种方式不影响键盘可用性，同时解决视觉问题。

::ng-deep .p-datatable .p-sortable-column:focus:not(:focus-visible) {
  box-shadow: none !important;
  outline: 0 none;
}

说明：:focus-visible是现代浏览器支持的伪类，仅当焦点是用户主动通过键盘操作触发时才生效，程序自动设置的焦点不会触发该样式。

方案3：修改表头元素的tabindex（不推荐用于需键盘导航的场景） #

给表头<th>元素添加tabindex="-1"，使其不参与浏览器的自动焦点导航，但用户点击仍可正常排序。

示例模板代码：

<th class="table-header-primary" 
    [style.width.%]="fileNameWidth" 
    [pSortableColumn]="'fileName'"
    tabindex="-1">
  File Name
</th>
<th class="table-header-primary" 
    [style.width.%]="fileDateWidth" 
    [pSortableColumn]="'fileDate'"
    tabindex="-1">
  File Date
</th>

注意：该方案会破坏键盘导航的可用性，若项目需要支持通过Tab键切换表头并按Enter排序，不建议使用。

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