[Bug Report][3.7.1] Memory leak with VOverlay and VDataTable

[lebinhchieu]

Environment

Vuetify Version: 3.7.1
Vue Version: 3.5.0
Browsers: Google Chrome
OS: Windows

Steps to reproduce

1. Install packages, build & preview
2. Access home page via Chrome
3. Open memory in devtools & take a snapshot
4. Open the snapshot, filter TestObject => Nothing shows
5. Click Overlay or Data Table link (both pages create a TestObject instance)
6. Click Back to home button in the Overlay or Data Table link to back to home
7. Take a new memory snapshot
8. Filter TestObject => a record shows

Expected Behavior

TestObject should be removed

Actual Behavior

TestObject is still there after backing to home

Reproduction Link

https://github.com/lebinhchieu/vuetify-memory-issue

[CyberNick2025]

Hey,
After receiving several complaints that our web application keeps hanging up after some time, we also started looking for the cause and came across v-dialog.

Thanks to @peter-gy and his bug report #18880. By reading his comments I was able to try out the approach he proposed to solve an similar issue. 🎉

I used function getEventListeners(document) in the developer console of Chrome to find out if there is an event listener that is not removed after closing the dialog. I was able to find out that the event listener for the focusin event is not removed cleanly and I am now quite sure that this is the cause of the memory leak.

I tried to locally edit the VDialog.mjs to resolve the issue. The event listener is added here:

if (IN_BROWSER) {
      watch(() => isActive.value && props.retainFocus, val => {
        val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
      }, {
        immediate: true
      });
    }

After adding the following code to the file and restarting the development server I was able to resolve the memory leak:

onBeforeUnmount(() => {
      document.removeEventListener('focusin', onFocusin)
    })

As this is the first time I added a comment to a GitHub project, I hope my comment was helpful 😄

[lebinhchieu]

Thanks for your response @CyberNick2025

Hope Vuetify team could fix the issue soon

[CyberNick2025]

Hi @lebinhchieu ,
one thing that may helps you in the meantime is to set the property retain-focus of the v-dialog to false in your code:
:retain-focus="false". If you do not need retain-focus to be set to true it may works as a workaround for you.

https://vuetifyjs.com/en/components/dialogs/#props-retain-focus