fix(Touch directive): prevent memory leak when parent: true and element is detached - #23065
Open
waterWang wants to merge 1 commit into
Open
fix(Touch directive): prevent memory leak when parent: true and element is detached#23065waterWang wants to merge 1 commit into
waterWang wants to merge 1 commit into
Conversation
…nt is detached When the Touch directive is used with parent: true, the unmounted hook attempts to find the target via el.parentElement. However, by the time unmounted fires, the element may already be detached from the DOM, making parentElement null. This causes the cleanup of event listeners and _touchHandlers to be skipped entirely, leaking memory. Fix: store the resolved target element reference and add/remove options on the directive element during mounted, and use the stored values in unmounted instead of re-deriving them from the DOM. Also pass the correct options to removeEventListener so that listeners registered with custom capture: true are properly removed. Closes vuetifyjs#21887
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
When the
Touchdirective is used withparent: true, theunmountedhook attempts to find the target viael.parentElement. However, by the timeunmountedfires, the element may already be detached from the DOM, makingparentElementnull. This causes the cleanup of event listeners and_touchHandlersto be skipped entirely, leaking memory.Root Cause
In
packages/vuetify/src/directives/touch/index.ts, theunmountedfunction re-derives the target element from the DOM:When
parent: trueand the element is detached (e.g. inside av-if/router transition),el.parentElementreturnsnull, so no cleanup runs.Fix
mountedso it's available inunmountedregardless of DOM attachment state.addEventListeneroptions alongside the target and pass them toremoveEventListenerfor correct matching when custom options (e.g.capture: true) are used.unmounted.Changes
packages/vuetify/src/directives/touch/index.ts— store target + options inmounted, use stored values inunmountedpackages/vuetify/src/globals.d.ts— add_touchTargetand_touchOptionsto theHTMLElementinterfaceCloses #21887