fix: leaving hovered state when pointer hovers child element (#194)

vueuse · May 29, 2024 · a8a5624 · a8a5624
1 parent d237079
commit a8a5624
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/features/eventListeners.ts b/src/features/eventListeners.ts
@@ -50,10 +50,6 @@ export function registerEventListeners<T extends string, V extends MotionVariant
       hovered.value = false
       tapped.value = false
     })
-    useEventListener(target as any, 'mouseout', () => {
-      hovered.value = false
-      tapped.value = false
-    })
   }
 
   // Tapped

diff --git a/tests/components.spec.ts b/tests/components.spec.ts
@@ -120,9 +120,16 @@ describe.each([
 
     expect(el.style.transform).toEqual('scale(1.2) translateZ(0px)')
 
-    // Should return to initial
+    // Should do nothing on 'mouseout'
+    await wrapper.trigger('mouseout')
+    // TODO: figure out a better way to test if a variant is not triggered than timeouts
+    await nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    await waitForMockCalls(onComplete, 0)
+
+    // Should return to initial, 'mouseleave' triggers when pointer left element and all descendants
     await wrapper.trigger('mouseleave')
-    await waitForMockCalls(onComplete)
+    await waitForMockCalls(onComplete, 1)
 
     expect(el.style.transform).toEqual('scale(1) translateZ(0px)')
   })