當 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();
    }
  }
}