JS error when using inside multiple material tabs

[Jan]

When I use multiple instances of the kendo editor in different material tabs, I get the JS error:

TypeError: Cannot read property 'createElement' of null

https://stackblitz.com/edit/angular-d9rsu8

 

The problem occurs in Chrome and Edge but not in Fireox and also with the latest v8 angular packages.

[Martin]

Hi Jan,

Thank you for the provided example.

Indeed this error is expected. It is caused by the editors (in Second and Third tab) which are not rendered in the DOM yet. Please, check the screenshot.

In fact, there are no rendered editors in the DOM, except the first one. That is why "Cannot read property 'createElement' of null" error is thrown.

In order to avoid initialization of editors that are not currently in the DOM set the iframe option to false:

<mat-tab-group>
      <mat-tab label="First">
        <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
      </mat-tab>
      <mat-tab label="Second">
        <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
      </mat-tab>
      <mat-tab label="Third">
        <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
      </mat-tab>
    </mat-tab-group>

Here is an example

https://stackblitz.com/edit/angular-d9rsu8-3tu5sp?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Itiel]

Hi Martin, 

I encountered the same problem. In the documentation, I see that setting [iframe] to "true" causes side effects. ("the Editor will run in style non-encapsulated mode."). I don't want these effects...

I think that this behavior is a bug you need to resolve. It doesn't make sense that an Editor inside a tab throws an exception, no matter where is located.

 

Itiel

[Itiel]

Sorry I mean setting [ifarme] to false..

[Martin]

Hi Itiel,

It seems that the issue is caused by the fact that the Editor is tried to be created in the non-existent container. The Editor used in div with *ngIf directive or Kendo TabStrip component works properly. We guess that there is something specific in the way of how the content of the mat tab is initialized, which is not directly related to Kendo.

I consulted this issue with the assigned developer and I can assure you that we will try to find a way to integrate the Editor component with Angular Material Tab component. Because of technical reasons, currently, we are not sure that this is a bug on our site, but we will try to do our best to make it possible, although we think that there is something specific in the mat tab.

Meanwhile, what I could suggest to you as a workaround is to utilize the Kendo Angular TabStrip component. Please check the attached project. To run the application execute the following command in the root folder:

- npm i

- ng serve

Feel free to contact us if any further questions come up.

Regards,
Martin
Progress Telerik

[Martin]

Hi Itiel,

A quick follow up on this case.

After some research on our side, we found what causes the discussed error. Please track the following related GitHub issue:

https://github.com/telerik/kendo-angular/issues/2765

Once fixed the issue will be updated.

Accept our apologies for all the inconvenience caused while the problem is still present.

Regards,
Martin
Progress Telerik

[Itiel]

Thank you, I'll track this issue