After Dialog turns on the EnableResize function, the memory cannot be released when the dialog is closed

[wills]

1. Add two Dialog pages, one [EnableResize = true] and one [EnableResize = false], with other attributes the same (5MB data will be loaded in the page)

2. Before you start clicking, take a memory snapshot

3. Click the [Not Allow Resize Dialog] button 10 times, click [collect garbage], and take a memory snapshot again. At this time, it is found that the memory has increased by about 2MB-5MB. This is normal.

4. Click the [Allow Resize Dialog] button 10 times, click [collect garbage], and take a memory snapshot again. At this time, it is found that the memory has increased by about 50MB.

Example:https://stackblitz.com/edit/angular-9a6kdk?file=src%2Fdialog%2Fenableresizedialog%2Ferdialog.html,src%2Fdialog%2Fdisableresizedialog%2Fdrdialog.html,src%2Fdialog%2Fdialog.page.ts

[Kokila Poovendran]

Hi wills

We have already considered the reported issue “After enable the enableResize property, memory cannot be released when the dialog is closed" as a bug from our end and the fix for the issue will be included with our upcoming patch release ,which is expected to be rolled out at the end of February, 2024. Now you can track the status of the reported issue through the feedback below,

Feedback Link:  https://www.syncfusion.com/feedback/50757/after-enable-the-enableresize-property-memory-cannot-be-released-when-the-dialog

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[Kokila Poovendran]

Hi wills,

We have included the fix for the issue "After enable the enableResize property, memory cannot be released when the dialog is closed" with our package version “24.2.8”. Therefore, we recommend upgrading to our latest version to resolve the current issue.

Root cause

• When rendering the dialog component, the resize property is enabled. In this case, the event listener was adding the windowResizeHandler method to the window. However, when hiding the dialog component, the event listener was not removed. This is the reason why, when rendering the dialog component multiple times, the memory cannot be released.
• When we use bind(this) to create a new function, it returns a new function reference. Therefore, the removeEventListener function won't work correctly because it expects the exact same function reference that was used to add the event listener.