fix(ScrollArea): clear setTimeout, eventListener when unmount ScrollA…

…reaScrollbarScroll (#672)
radix-vue · Feb 9, 2024 · 74872bb · 74872bb
1 parent 8296b78
commit 74872bb
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarScroll.vue
@@ -40,18 +40,22 @@ const { state, dispatch } = useStateMachine('hidden', {
   },
 })
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   if (state.value === 'idle') {
-    window.setTimeout(
+    const timeId = window.setTimeout(
       () => dispatch('HIDE'),
       rootContext.scrollHideDelay.value,
     )
+
+    onCleanup(() => {
+      window.clearTimeout(timeId)
+    })
   }
 })
 
 const debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)
 
-watchEffect(() => {
+watchEffect((onCleanup) => {
   const viewport = rootContext.viewport.value
   const scrollDirection = scrollbarContext.isHorizontal.value
     ? 'scrollLeft'
@@ -69,6 +73,10 @@ watchEffect(() => {
       prevScrollPos = scrollPos
     }
     viewport.addEventListener('scroll', handleScroll)
+
+    onCleanup(() => {
+      viewport.removeEventListener('scroll', handleScroll)
+    })
   }
 })
 </script>