Exception when using with Angular ngFor/ngIf

Spreadsheet
#1

Hello,
We are considering purchasing a license for dhx-spreadsheet. However we have run into a problem when integrating with our application. When the spreadsheet is used with a component that it is toggled from view using ngIf/ngFor it seems to not initialize correctly and causes a null exception.

We have managed to reproduce the problem with a very simple Angular application, here is the codesandbox example:
https://codesandbox.io/p/devbox/dhxmlangularproblem-mp3kfm?file=%2Fsrc%2Fapp%2Fspreadsheet%2Fspreadsheet.component.ts&embed=1

Here is the Angular template code of the example with the problem:

`<button (click)="onButtonClick(true)">Count Up</button>
    <spreadsheet *ngIf="counter % 2 === 0" [dummyCounter]="counter" />`

So the spreadsheet is only shown if counter mod 2 === 0.

You need to click in the spreadsheet edit line (the cell below the menu). After clicking the count button to make the spreadsheet appear/disappear. Eventually you will get an exception in your spreadsheet code in onselectionchange:

                                  onselectionchange: function () {
                                        var e = n.getRootView(),
                                            t = e && e.refs && e.refs.input_wrapper,
                                            i = "0px";
                                        if (n._isEdit && n._value && n._input) {
                                            var o = n._input.selectionStart,
                                                r = (0, d.getStringWidth)("".concat(n._value).substr(0, o)) + 12,
                                                a = n.getRootNode().offsetWidth;  // <----- exception here, n.getRootNode() returns null
                                            t && a < r && (i = a - r + "px");
                                        }

dhmlAngularProblem-ezgif.com-crop

Hopefully you can verify and find a solution.
Thank you.
Greg.

#2

Hello.

Thank you for your report. The problem was confirmed. We’ll try to fix it in one of the future updates.
For now as a workaround in your “spreadsheet.component.ts” please, try to remove the selectionchange event on the component destroying:

  ngOnDestroy(): void {
//add the following code
    document.removeEventListener(
      'selectionchange',
      this._spreadsheet._editLine._htmlEvents.onselectionchange,
    );
//end
    this._spreadsheet.destructor();
  }
#3

Hello Greg.

We fixed your reported problem in the latest dhx.Spreadsheet update (v5.1.6).
Now there is no need to clear the selectionchange event on the component destructing anymore.

Please, download the latest available dhx.Spreadsheet build from your client’s area to get this fix.
Thank you for your report