TypeError: Cannot read properties of undefined (reading 'nativeElement') with scrollable and state enabled table

[rdrrichards]

I'm submitting a ...

[X] bug report

Plunkr Case (Bug Reports)

I was unable to reproduce this issue with StackBlitz. I have code below to reproduce the issue in Chrome.

Current behavior

I added a table to my application that has sortable columns, is scrollable and persists state to localStorage. After a sort is set in state by clicking one of the table column headers, I start to see the error below when I refresh the browser to reload the application, or the application reloads after a rebuild when using ng serve.

core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at Table.scrollTo (primeng-table.js:1189)
    at Table.resetScrollTop (primeng-table.js:1153)
    at Table._filter (primeng-table.js:1028)
    at Table.sortSingle (primeng-table.js:508)
    at Table.ngOnChanges (primeng-table.js:258)
    at Table.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
    at callHook (core.js:2536)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9480)

If I remove the scrollable and scrollHeight attributes, no error is thrown. If I remove the stateKey and stateStorage attributes, no error is thrown. If I have all 4 of these attributes on the table, the error is thrown. If I clear the state from localStorage, the error stops getting thrown until I sort the table again.

Expected behavior

I would not get any console error when loading the application. These attributes should work together without throwing an error.

Minimal reproduction of the problem with instructions

Create a new angular application using the CLI, install primeng, primeicons, and primeflex.

Create a new component named case-list, code below.

case-list.component.ts

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

interface PendingCase {
    caseNo: string;
}

@Component({
    selector: 'app-case-list',
    templateUrl: './case-list.component.html'
})
export class CaseListComponent implements OnInit {
    cols: any[] = [];
    selectedCases: PendingCase[] = [];
    pendingCasesList: PendingCase[] = [];
    ngOnInit(): void {
        this.cols = [
        { field: 'caseNo', header: 'Case #', width: '0 0 12%' },
        { field: 'code', header: 'Code', filterType: 'custom', width: '0 0 10%' },
        { field: 'caseDate', header: 'Case Date', format: 'yyyy-MM-dd', width: '0 0 12%' },
        { field: 'lastCaseDate', header: 'Last Case Date', format: 'yyyy-MM-dd hh:mm a', width: '0 0 17%' },
        { field: 'statusName', header: 'Status', width: '0 0 12%' },
        { field: 'accountNo', header: 'Account #', width: '0 0 10%' },
        { field: 'accountName', header: 'Account Name', width: '0 0 16%' },
        { field: 'queuedFor', header: 'Assigned To', width: '0 0 8%', tooltipField: 'holdReason' }
        ];
    }
}

case-list.component.html

<p-table [columns]="cols" [value]="pendingCasesList" [autoLayout]="true"
  [scrollable]="true" scrollHeight="350px" stateKey="pendingCases" stateStorage="local">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th style="flex: 0 0 3%">
        <i class="pi pi-pencil"></i>
      </th>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field" [style.flex]="col?.width">
        <div class="p-d-flex p-ai-center p-jc-between">
          {{col.header}}
        <p-sortIcon [field]="col.field" style="font-size: .7em; margin-right: 10px;"></p-sortIcon>
      </div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-res let-rowData let-columns="columns" let-rowIndex="rowIndex">
    <tr [pContextMenuRow]="rowData" [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
      <td style="flex: 0 0 3%">
      </td>
      <td *ngFor="let col of columns" [style.flex]="col?.width">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

Add the component to the app.component.html.

app.component.html

<app-case-list></app-case-list>

Run the application using ng serve.

Click a column header to set a sort, any column will do. Press F12 to open the Chrome dev tools, and then reload the application using the F5 key. You should see the error above in the console.

Environment:

Angular CLI: 12.2.4
Node: 14.17.3
Package Manager: npm 6.14.11
OS: win32 x64

• Angular version: 12.2.4

• PrimeNG version: 12.2.1

• Browser: Chrome 95

• Language: TypeScript 4.3.5

• Node (for AoT issues): 14.17.3

Repo: https://github.com/rdrrichards/prime-table

[ranthonissen]

I have almost the same error.
Mine says:

core.js:6498 ERROR TypeError: Cannot read properties of undefined (reading 'field')
    at Table.multisortField (primeng-table.js:555)
    at primeng-table.js:540
    at Array.sort (<anonymous>)
    at Table.sortMultiple (primeng-table.js:539)
    at Table.ngOnChanges (primeng-table.js:260)
    at Table.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1510)
    at callHook (core.js:2548)
    at callHooks (core.js:2507)
    at executeCheckHooks (core.js:2439)
    at refreshView (core.js:9493)

It appears the error occurs when the multiSortMeta field of the tabelState is emptied

{first: 0, rows: 50, sortField: "_defaultSortOrder", sortOrder: 1, multiSortMeta: []}

[mserege]

Same error for me.

Looks like it tries to access wrapperViewChild while being in the first ngForChanges call but wrapperViewChild will not be initialized until ngAfterViewInit.

Could protecting scrollTo call by checking if wrapperViewChild is initialized be a fix ?

[waratah]

#11064

Note that the table reference is not static, it can be recreated by a change of variable causing issues. so I have changed it.

[yigitfindikli]

Fixed in 25381b1