Severe Memory Leak

[ngrippa]

Describe the bug
Whenever opening/closing the DatePicker about one MB of Memory is leaked.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://vue3datepicker.com/props/modes/#range
2. Open Devtools/Memory
3. Create a Heap Snapshot
4. Click on the Datepicker to open the Calendar Popup
5. Click anywhere else in order to close a Popup
6. Repeat 4 & 5 as often as you want to
7. Create another Heap Snapshot
8. The Snapshot should be larger then the previous, about 1MB per cycle.
9. You can also create Snapshots in the Middle of the Process, to see how memory consumption grows. You can also manually Garbage Collect during the process, it won't matter.

Expected behavior

The Popup should deallocate all memory when closed or, at least, only consume the memory once. Currently, additional memory is allocated every time the Popup is opened.

This leads to severe Memory Leaks in Web Applications with many DatePickers / Users clicking the DatePickers many times.

Desktop & mobile (please complete the following information):

• Browser: Chrome, Firefox
• Library version: 11.0.1
• Note: I was not able to reproduce this with the official Stackblitz. However, it worked in the official documentation and on a simple vue app, created by npm create vue@latest with only this package installed. I am not sure why this is not happending on Stackblitz.

[ngrippa]

Potentially related issue, although solved a long time ago: #302

[Flink91]

Confirmed, I have the same issue

[qxygene1]

any fix yet?

[Jasenkoo]

Can you try setting :transitions=false and see if helps?

[qxygene1]

Can you try setting :transitions=false and see if helps?

still laggy

[ngrippa]

@sahilrajthapa @Jasenkoo

Sadly there is still a memory leak, it just got reduced to ~300KB per Cycle instead of ~1MB. Steps to reproduce are exactly the same as above.
Would you mind reopening the issue?

@sahilrajthapa do you want to investigate further or should I take over?

[ngrippa]

@Jasenkoo disabling transitions does not fix the leak.

[sahilrajthapa]

@ngrippa Last time I looked into the issue, I found that the Vue.js transition component was retaining memory due to detached elements. I had attached a screenshot on the PR, where the transition component showed a retained size of 20%. I had found similar issues on the Vue.js repo — 11782 and 12181. I think we can find other issues too. Even if those issues are closed, we can still test for detached elements in the transition component examples; the problem should be reproducible there too.

[ngrippa]

@sahilrajthapa Thanks for the quick reply.

It's weird, because the detached elements are getting more and more, thus leaking memory, even with :transitions="false" and the latest release in our project.

Is that really not the case for you? I will try to create a minimal repro then.

[sahilrajthapa]

@ngrippa If that's the case, then I think we should look into it. However, I won't be able look into it for few days.