TypeError: Cannot read property 'parentElement' of null p-treetable angular

Question

I am using below code to load data in p-treeTable in Angular application. When I try to navigate through tree table cell editor text box by using tab key, I am getting below error message while navigating from editable field to non editable field i.e., navigating from name cell to type cell.

Code:

<p-treeTable #tt [value]="files" [columns]="cols">
<ng-template pTemplate="header" let-columns>
    <tr>
        <th *ngFor="let col of cols" style="width:30px">
            {{col.header}}
        </th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData"  let-columns="columns">
    <tr [ttRow]="rowNode">
        <td width="30" class="text-right" ttEditableColumn> 
          <p-treeTableToggler [rowNode]="rowNode">
                </p-treeTableToggler>
            <p-treeTableCellEditor>
                <ng-template pTemplate="input">
                    <input type="text" pInputText [(ngModel)]="rowData['name']" />
                </ng-template>
                <ng-template pTemplate="output">
                    <input type="text" pInputText [(ngModel)]="rowData['name']">
                 </ng-template>
            </p-treeTableCellEditor>
         </td> 
         <td width="30" class="text-right">
            <span>
                {{rowData['size']}}
            </span>
         </td>
         <td width="30" class="text-right" ttEditableColumn>
            <p-treeTableCellEditor>
                <ng-template pTemplate="input">
                    <input type="text" pInputText [(ngModel)]="rowData['type']" />
                </ng-template>
                <ng-template pTemplate="output">
                    <input type="text" pInputText [(ngModel)]="rowData['type']">
                 </ng-template>
            </p-treeTableCellEditor>
         </td>
    </tr>
</ng-template>

Error Message:

core.js:4117 ERROR TypeError: Cannot read property 'parentElement' of null
    at TTEditableColumn.push../node_modules/primeng/__ivy_ngcc__/fesm5/primeng-treetable.js.TTEditableColumn.moveToNextCell (primeng-treetable.js:3393)
    at TTEditableColumn.push../node_modules/primeng/__ivy_ngcc__/fesm5/primeng-treetable.js.TTEditableColumn.onKeyDown (primeng-treetable.js:3366)
    at TTEditableColumn_keydown_HostBindingHandler (primeng-treetable.js:3461)
    at executeListenerWithErrorHandling (core.js:14935)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14970)
    at HTMLTableCellElement.<anonymous> (platform-browser.js:615)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:28122)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

StackBlitz Demo: https://stackblitz.com/edit/primeng-treetable-hte3gta?file=src%2Fapp%2Fapp.component.html

Answer 1

This seems related to unexpected behavior for primeng when you focus cell but ui-editing-cell class is not set on td element.

As a workaround you can try the following:

import { TTEditableColumn } from 'primeng/primeng'

const origingFindCell = TTEditableColumn.prototype.findCell;
TTEditableColumn.prototype.findCell = function (element) {
  let result  = origingFindCell.call(this, element);
  if (!result && element) {
    result = element.closest('td.ui-editable-column')
  }

  return result;
};

Forked Stackblitz