search

tanepiper / ngx-tinynodes

Monorepo for components released on NPM @tinynodes
https://tanepiper.github.io/ngx-tinynodes/
Other
37 stars 15 forks source link

[BUG] NGX-EDITORJS - ApplicationRef.tick is called recursively #27

Open mikeciz opened 3 years ago

mikeciz commented 3 years ago

Which Library? ngx-editorjs

Describe the bug I've got the library up and running perfect. In my HTML, I have the following: <ngx-editorjs *ngIf="isEditing" #ngxEditorJS [holder]="holder" [blocks]="data"></ngx-editorjs>

I'm utilizing a slide-toggle to enable/disable editing of the form. There's a separate div which displays the "read-only" version since I didn't see a way to set ngx-editorjs to a read-only mode.

I can enable the editor perfectly. The read-only version goes away via an *ngIf and the ngx-editorjs initializes as expected. My issue is when I then go and click the toggle to disable editing. When I do that, the ngx-editorjs goes away as expected, however, I get the following error: ApplicationRef.tick is called recursively at ApplicationRef.tick and from line 272 of the function destroyInstance (https://github.com/tanepiper/ngx-tinynodes/blob/4a77f6e2a70f793c22ef249b810463a598d05e0b/libs/ngx-editorjs/ngx-editorjs/src/lib/services/editorjs.service.ts)

To Reproduce Steps to reproduce the behavior:

  1. Add an *ngIf to the component
  2. Toggle the view of the component to remove it from the DOM

Expected behavior I think this is happening because the function to destroy is being run during a change detection cycle. I would assume that the this.ref.tick() may not be necessary in this situation, however, perhaps it's needed in other instances. A try/catch would be nice at a minimum?!

Desktop (please complete the following information):

Additional context Thanks for this library! It really made it easy to add EditorJS to my angular app!