nb-tree-grid-row-toggle ERROR TypeError: Cannot read property 'elementRef' of undefined

[mrguamos]

Issue type

• [x] bug report
• [ ] feature request

Issue description

Using TreeGrid, sometimes when I click the chevron icon (right arrow) this error appears:

ERROR TypeError: Cannot read property 'elementRef' of undefined at oa.getDataIndex (main-es2015.1d739b58e35289c1defe.js:1) at oa.toggleRow (main-es2015.1d739b58e35289c1defe.js:1) at oa.toggleCellRow (main-es2015.1d739b58e35289c1defe.js:1) at Oa.toggleRow (main-es2015.1d739b58e35289c1defe.js:1) at toggleRow (main-es2015.1d739b58e35289c1defe.js:1) at Object.handleEvent (1-es2015.1eb53515f8fbaee146a1.js:1) at Object.handleEvent (main-es2015.1d739b58e35289c1defe.js:1) at Object.handleEvent (main-es2015.1d739b58e35289c1defe.js:1) at Ei (main-es2015.1d739b58e35289c1defe.js:1) at main-es2015.1d739b58e35289c1defe.js:1

It does not occur when I click the item inside the grid. Just the arrow icon which was generated by the nb-tree-grid-row-toggle

NOTE: Data is being served by the server, not static.

Current behavior: Error shows sometimes. Mostly on first click.

Expected behavior:

Steps to reproduce:

Related code:

data: TreeNode<any>[];

constructor(private coaService: CoaService) {
    this.getCoas();
  }

getCoas() {
    this.coaService.getCoas().subscribe(coas => {
      this.data = coas;
    })
  }

<table [nbTreeGrid]="data"> 

                    <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

                    <ng-container [nbTreeGridColumnDef]="customColumn">
                        <td nbTreeGridCell *nbTreeGridCellDef="let row">
                            <span class="hover">
                                {{row.data.name}}
                            </span>
                            <nb-tree-grid-row-toggle [expanded]="row.expanded" *ngIf="row.data.kind === 'Title'">
                            </nb-tree-grid-row-toggle>

                        </td>
                    </ng-container>

                    <ng-container *ngFor="let column of defaultColumns" [nbTreeGridColumnDef]="column">
                        <td nbTreeGridCell *nbTreeGridCellDef="let row">
                            {{row.data[column]}}
                        </td>
                    </ng-container>

</table>

Other information:

npm, node, OS, Browser

OS: Windows 10
node version v10.15.3
Browser: Chrome

Angular, Nebular

 "@angular/animations": "^8.2.3",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.10",
    "@angular/compiler": "~8.2.10",
    "@angular/core": "~8.2.10",
    "@angular/forms": "~8.2.10",
    "@angular/platform-browser": "~8.2.10",
    "@angular/platform-browser-dynamic": "~8.2.10",
    "@angular/router": "~8.2.10",
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@nebular/theme": "^4.6.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"

[mrguamos]

I don't know if this is the same error but the same scenario is happening in the ngx-admin demo

[mrguamos]

as a workaround I hid the nb-tree-grid-row-toggle and used an icon toggling the right and down arrow.

<table [nbTreeGrid]="data">

                    <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

                    <ng-container [nbTreeGridColumnDef]="customColumn">
                        <td nbTreeGridCell *nbTreeGridCellDef="let row" class="hover">
                            <span>
                                {{row.data.name}}
                            </span>
                            <span class="pl-2" *ngIf="!row.expanded && row.data.kind === 'Title'"><i class="fas fa-chevron-right fa-xs"></i></span>
                            <span class="pl-2" *ngIf="row.expanded && row.data.kind === 'Title'"><i class="fas fa-chevron-down fa-xs"></i></span>
                            <nb-tree-grid-row-toggle [expanded]="row.expanded" *ngIf="row.data.kind === 'Title'"
                                style="visibility: hidden;">
                            </nb-tree-grid-row-toggle>

                        </td>
                    </ng-container>

                    <ng-container *ngFor="let column of defaultColumns" [nbTreeGridColumnDef]="column">
                        <td nbTreeGridCell *nbTreeGridCellDef="let row">
                            {{row.data[column]}}
                        </td>
                    </ng-container>

</table>