Leak in @syncfusion/ej2-angular-richtexteditor

[kievsash]

Hi

I observe detached Elements leak in @syncfusion/ej2-angular-richtexteditor ^21.1.35

I created minimal Angular repo with reproduce code: https://github.com/kievsash/syncfusion-richtextedit-leak

Steps to reproduce:

1. ng serve and go to localhost:4200
2. go back and forth to test page
3. With Edge Detached Elements DevTools tab (or ChromeDevTools Performance monitor) observe that Detached elements number is increasing

Please take a look

[kievsash]

I observed similar issue in ejs-checkbox as well

[VinithaJeyakumar]

Hi kievsash,

We have tried to run the sample you have attached, but which is not runnable at our end. So, we have created a sample similar to your use case scenario and checked the reported issue using both chrome and edge browser. But we couldn't find any memory leak with RichTextEditor control as you reported. Please find the attached sample below,

Can you please share us with the simple issue replicating runnable sample or modify the attached sample with the issue reproducing code and also share exact issue replication steps to further validate on our end.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_memory52961508

[kievsash]

To reproduce issue you should

1. git clone my repo
2. cd
3. npm i
4. ng serve
5. Open Chrome dev tools, press escape to open additional tabs, chose Performance monitor.
6. go to page with rich-text editor and back(but back not with browser button but routerLink to root page)
7. repeat step 6 a few times and observe Dom nodes increase each time to visit and leave page with rich-editor

What was thr issue you couldnt start reproduce app?

[kievsash]

I downloaded your reproduce app and could reproduce an increase in DOM nodes on each iteration (enter page with richeditor and then navigating from it with routerlink) to page with rich-editor

[kievsash]

And here is reproduce in your app in Edge Dev tools - > detached Elements tab you can see that on after each visit of page with richeditor - number fo detached (lost) elements is increasing

[VinithaJeyakumar]

Hi kievsash,

We investigated this reported issue from our end, and after further validation we considered this is as a bug at our end and we have logged the bug report for the same. Also, we have planned to resolve this issue in our any of our upcoming volume releases. You can track the status of this fix in the feedback link below.

Feedback: Need to resolve Detached Element Leak in Angular platfrom in Angular | Feedback Portal (syncfusion.com)

Please let us know if you have any concerns.

Regards, Vinitha

[kievsash]

Thank you for cooperation. Link shows me "Access Denied"

[VinithaJeyakumar]

Hi kievsash,

We have moved the feedback status to public. Now you can access the bug feedback. Please check the link below,

https://www.syncfusion.com/feedback/42986/need-to-resolve-detached-element-leak-in-angular-platfrom

Regards, Vinitha

[gsumankumar]

For housekeeping purposes, we are closing this ticket. You can track the progress of the reported bug by clicking on the feedback link below. https://www.syncfusion.com/feedback/42986/need-to-resolve-detached-element-leak-in-angular-platfrom

[kievsash]

@gsumankumar , one remark

In Form-base.ts you addEventListener on AfterViewInit method https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/base/src/form-base.ts#L108C1-L110C79

But AFAI see you do not remove these listeners in component which uses FormBase

Maybe it make sense to add ngOnDestroy to FormBase where you removeEventListeners and then call it from ngOnDestroy of specific component which uses FormBase()? (similar to what you do with this.formContext.ngAfterViewInit(this); but with ngOnDestroy also) https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/richtexteditor/src/rich-text-editor/richtexteditor.component.ts#L214