Memory Leak: DatePicker, Tab, ToolTip

[GMInf]

Describe the bug
Accumulation of detached HTML Elements from DatePicker, Tab, ToolTip enterprise-ng Demo

To Reproduce
Steps to reproduce the behavior:
DatePicker

1. Run enterprise-ng
2. Select http://localhost:4200/ids-enterprise-ng-demo/datepicker
3. Open Dev tools
4. Select Memory tab – select Allocation Instrumentation on timeline
5. Record and stop after 3 seconds. This is to establish a baseline for comparing the detached html elements
6. Filter for “detached html”
7. Start a new record
8. Click on datepickers to open calendars
9. Click on Force Garbage Collect and Stop recording
10. Filter for “detached html”
11. Compare the two recordings
12. New detached elements have been added. This accumulates as more datepickers are opened.

Tooltip

1. Run enterprise-ng
2. Select the http://localhost:4200/ids-enterprise-ng-demo/tooltip
3. Open Dev tools
4. Select Memory tab – select Allocation Instrumentation on timeline
5. Record and stop after 3 seconds. This is to establish a baseline for comparing the detached html elements
6. Filter for “detached html”
7. Start a new record
8. Click on http://localhost:4200/ids-enterprise-ng-demo/tooltip-nested and then go back to http://localhost:4200/ids-enterprise-ng-demo/tooltip. This should destroy the components on tooltip demo and create new ones
9. Click on Force Garbage Collect and Stop recording
10. Filter for “detached html”
11. Compare the two recordings
12. New detached elements have been added. This accumulates as more tooltip demo components are created and destroyed.

Tab

1. Run enterprise-ng
2. Select the http://localhost:4200/ids-enterprise-ng-demo/tabs-dynamic
3. Open Dev tools
4. Select Memory tab – select Allocation Instrumentation on timeline
5. Record and stop after 3 seconds. This is to stablish a baseline for comparing the detached html elements
6. Filter for “detached html”
7. Start a new record
8. Close a tab
9. Click on Force Garbage Collect and Stop recording
10. Filter for “detached html”
11. Compare the two recordings
12. New detached elements have been added. This accumulates as more tabs are closed.
13. Close the last tab, repeat 9. to add more detached HTML elements

Expected behavior
There should be no detached HTML elements found after destroying the components. Other demo components does not leave any or accumulate any detached HTML elements.

Version

• ids-enterprise-ng: [main/13.x]

Screenshots
If applicable, add screenshots to help explain your problem.

Platform

• OS Version: [Windows 11]
• Browser Name [e.g. chrome]
• Browser Version [100.0.4896.75 (Official Build) (64-bit)]

Additional context
Add any other context about the problem here.

[tmcconechy]

@GMInf Before we dig into this one... Let me explain what im seeing to make sure.

In all three of these cases you didnt destroy? So this is what im doing... For example for the last case

1. Go to http://localhost:4200/ids-enterprise-ng-demo/tabs-dynamic
2. go to memory tab in chrome tools, garbage collect and take a heap snap shot
3. close a tab
4. switch to another page and then back (to destroy
5. go to memory tab in chrome tools, garbage collect and take a second heap snap shot
6. select "comparison" to compare first and second
7. search for detatch html -> notice there are no + deltas

I think having it "destroy itself" while its still on the page? Not sure about that?

[GMInf]

For the 3rd case Tabs-dynamic, I did not destroy the tab-dynamic component. I only closed the opened tab items. The expected result should be that the tab-items should be destroyed when closed. But the number of detached htmls accumulates as tab items are closed.

1. Go to http://localhost:4200/ids-enterprise-ng-demo/tabs-dynamic
2. go to memory tab in chrome tools, garbage collect and take a heap snap shot
3. close a tab
4. go to memory tab in chrome tools, garbage collect and take a second heap snap shot
5. select "comparison" to compare first and second
6. search for detatched html -> new detached htmls
7. close a tab
8. go to memory tab in chrome tools, garbage collect and take a second heap snap shot
9. select "comparison" to compare first and second
10. search for detatched html -> new detached htmls

When switching to another page (destroy tab-dynamic) then all detached htmls are destroyed. But our app uses of a dynamic tab that is present at all times. That would cause a memory leak as tab items are closed.

[CindyMercadoReyes]

This issue is now resolved.