当 p-table 初始化 header 时突出显示，就好像它专注于

Question

我正在为一个项目使用 prime-ng p-table。 我有一个按钮，单击该按钮会打开一个带有网格的模式。 网格如下所示：

<p-table [value]="fileList" [autoLayout]="true" class="shadow">
          <ng-template pTemplate="header">
              <tr>
                  <th class="table-header-primary" [style.width.%]="fileNameWidth" [pSortableColumn]="'fileName'" >File Name</th>
                  <th class="table-header-primary" [style.width.%]="fileDateWidth"  [pSortableColumn]="'fileDate'">File Date</th> 
              </tr>
          </ng-template>
          <ng-template pTemplate="body" let-file let-i="rowIndex">
              <tr role="rowgroup">
                  <td scope="col" role="cell" class="table-body" [style.width.%]="fileNameWidth" [ngStyle]="{'text-align':'left','word-wrap':'break-word'}"> <a href="javascript:;">{{file.fileName}}</a></td>
                  <td scope="col" role="cell" class="table-body" [style.width.%]="fileDateWidth" [ngStyle]="{'text-align':'left'}">{{file.fileDate}}</td>
              </tr>
          </ng-template>
      </p-table>

这些列可通过 pSortableColumn 指令进行排序。 我面临的问题是，当模态打开时，表格 header 有蓝色边框，好像它正在被单击（它没有像这样打开模态），如下所示： 我以前曾多次与 p-table 合作过，但从未经历过这样的事情。 我知道我可以像这样覆盖 css class ：

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

但是我想在使用点击排序时有边框。 关于为什么会发生这种情况的任何想法？ 任何投入将不胜感激。 谢谢

Answer 1

您的桌子似乎正在自动对焦。 您可以尝试在模板中添加一些内容来代替焦点。 请注意，这对于屏幕阅读器来说可能是一种非常糟糕的体验。

<a href="#" style="height:0;"></a>
<p-table [value]="fileList" [autoLayout]="true" class="shadow">
    <!-- ... -->
</p-table>

也许更简洁的方法是以编程方式从活动元素中移除焦点。 这种方法来自Brian Bauman的这个答案。 请注意，它也会让屏幕阅读器用户感到不安。

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

@Component(/* ... */)
export class MyComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }
  }
}