From a8a56246444551a52f68a326a435825988a1600b Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Thu, 30 May 2024 01:47:05 +0200
Subject: [PATCH] fix: leaving hovered state when pointer hovers child element
 (#194)

---
 src/features/eventListeners.ts |  4 ----
 tests/components.spec.ts       | 11 +++++++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/features/eventListeners.ts b/src/features/eventListeners.ts
index e867674d..d55b9008 100644
--- 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
index 5354d5bd..1b967392 100644
--- 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)')
   })