When p-table initializes the header is highlighted as if it is focused on

jpuvo 0
Viewed 21

I'm using prime-ng p-table for a project. I have a button, that when clicked opens a modal that has a grid on it. The grid looks like this:

<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>

The columns are sortable through pSortableColumn directive. The issue I'm facing is that when the modal opens, the table header has the blue border as if it is being clicked on (it hasn't modal opens like this), like this: enter image description here I've worked with p-table many times before and have never experienced anything like this. I know I can override the css class like :

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

But I would like to have the border when the using clicks to sort. Any ideas as to why this is happening? Any input would be greatly appreciated. Thank you

primeng css angular html
1 Answers

It seems like your table is being autofocused. You could try having something before it in the template to take focus instead. Be aware that this is likely a very bad experience for screen readers.

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

Perhaps a cleaner way would be to programmatically remove focus from the active element. This approach comes from this answer by Brian Bauman. Be aware that it will also be jarring to screen reader users.

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

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

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