Ngx-datatable: Scrolling after row selection causes error in DataTableBodyComponent

[LucaAndrei]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
ScrollbarV enabled
Pagination enabled
Table selection enabled
When selecting a row and scrolling away from it you get the following error :
DataTableBodyComponent.html:22 ERROR TypeError: Cannot read property '-1' of null
at Object.eval [as updateDirectives] (DataTableBodyComponent.html:30)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14640)
at checkAndUpdateView (core.js:13787)
at callViewAction (core.js:14138)
at execEmbeddedViewsAction (core.js:14096)
at checkAndUpdateView (core.js:13788)
at callViewAction (core.js:14138)
at execEmbeddedViewsAction (core.js:14096)
at checkAndUpdateView (core.js:13788)
at callWithDebugContext (core.js:15041)

Also I noticed that in some cases I get the following error but I don't know the steps to reproduce :
ERROR TypeError: Cannot read property 'destroyed' of null

Expected behavior
Scrolling should work when a table row is selected

Reproduction of the problem

What is the motivation / use case for changing the behavior?
Component shouldn't have a bug

Please tell us about your environment:
Windows 10, using npm package manager

• Table version: 11.1.7
  I am using the latest NGX datatable version

• Angular version: 5.2.0
  I am using the latest Angular version

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Tested in Chrome Version 63.0.3239.132 (Official Build) (32-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 2.4.2

[kanclalg]

I have the same problem. It can be reproduced in ngx datatable demo, though I can only reproduce it on Chrome (macOS), steps:

1. Go to http://swimlane.github.io/ngx-datatable/#horz-vert-scrolling;
2. Press on any cell value;
3. Scroll down.

This bug can be reproduced regardless of whether table is selectable or not.

[jacekgolebiewski]

+1

[mgogi]

+1

[saaadel]

+1

[mavivone426]

+1

[saaadel]

Spend one day for debugging on my side, and I think I got the problem in the source.

Application.tick run on ViewRef removing in ngForOf logic sometimes. It forces to redraw all app (all views), and the body scrolling can change rows reference for ngFor directive in the database-body component, that can lead to redraw the body with new rows reference, and that mean with new temp reference in the following code:

<datatable-row-wrapper
...
*ngFor="let group of temp; let i = index; trackBy: rowTrackingFn;"

it kills ngForOf with re-initialization of the differ

So, it calls this.cd.detectChanges();on the body component twice - second one, when we are already in internal code called by cd.detectChanges();

I've tried to replace this.cd.detectChanges() on the following code in database-body::updateRows() and it helped:

if(!this.cdIsDetached) {
      try {
        this.cdIsDetached = true;
        this.cd.detach();
        this.cd.detectChanges();
      } finally {
        this.cd.reattach();
        this.cdIsDetached = false;
      }
    }

Note: cdIsDetached declared on body as following:
private cdIsDetached?: boolean;

[fuzzyMangix]

+1

[pratik-sinha]

Hello I am facing a similar problem the data in the table disappears and in the console I get the same error ERROR TypeError: Cannot read property 'destroyed' of null
Did anyone find a solution?
I have vertical scroll enabled too

[jingglang]

This error is still happening in version 13.0.0. It is replicatable in http://swimlane.github.io/ngx-datatable/#horz-vert-scrolling as mentioned by @kanclalg

[jatin-Maini]

+1 We are also facing the same issue. We have vertical scroll enabled. Wonder if it's due to that? We kinda need that for our requirements..anyone came out with a PR for this?

[ParadoxZero]

+1 we are also facing the same issue.

[iman-norouzi]

+1 same here.

[SidArtem]

temporary solution if you don't need to click/select data in rows

css

ngx-datatable datatable-selection {
    pointer-events: none;
}