fix(ScrollArea, Presence): cancel ScrollAreaThumb RAF loop and clean up Presence listeners on unmount (#2744)

yan-ad · web-flow · commit faf27e7be8b8 · 2026-06-24T22:41:39.000+08:00
* fix(ScrollArea): cancel ScrollAreaThumb RAF loop and clean up Presence listeners on unmount - ScrollAreaThumb: call removeUnlinkedScrollListenerRef to cancel the requestAnimationFrame loop on unmount, preventing a perpetual RAF loop that retains DOM references after component destruction - ScrollAreaThumb: remove duplicate viewport event listener removal - Presence: explicitly remove animation event listeners from the DOM node when the host component unmounts, preventing leaked listeners on teleported nodes Closes #2420 * chore(ScrollAreaThumb): use optional chaining for viewport cleanup
diff --git a/packages/core/src/Presence/usePresence.ts b/packages/core/src/Presence/usePresence.ts
@@ -158,6 +158,13 @@ export function usePresence(
   onUnmounted(() => {
     watcher()
     stateWatcher()
+    if (node.value) {
+      node.value.removeEventListener('animationstart', handleAnimationStart)
+      node.value.removeEventListener('animationcancel', handleAnimationEnd)
+      node.value.removeEventListener('animationend', handleAnimationEnd)
+    }
+    if (timeoutId !== undefined)
+      ownerWindow?.clearTimeout(timeoutId)
   })
 
   const isPresent = computed(() =>
diff --git a/packages/core/src/ScrollArea/ScrollAreaThumb.vue b/packages/core/src/ScrollArea/ScrollAreaThumb.vue
@@ -63,8 +63,8 @@ watchOnce(sizes, () => {
 })
 
 onUnmounted(() => {
-  viewport.value!.removeEventListener('scroll', handleScroll)
-  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)
+  viewport.value?.removeEventListener('scroll', handleScroll)
+  removeUnlinkedScrollListenerRef.value?.()
 })
 </script>
 
