From 05e7251e9d69736276f535d0bbb3e3d9abcf162f Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Fri, 19 Apr 2024 14:15:16 +0200
Subject: [PATCH] fix: return to previous state after hovered event variant
 (#183)

---
 src/features/eventListeners.ts | 5 ++---
 src/features/lifeCycleHooks.ts | 9 ++++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/eventListeners.ts b/src/features/eventListeners.ts
index 2a2a5f92..2ec334e1 100644
--- a/src/features/eventListeners.ts
+++ b/src/features/eventListeners.ts
@@ -12,7 +12,7 @@ export function registerEventListeners<T extends string, V extends MotionVariant
   const focused = ref(false)
 
   const mutableKeys = computed(() => {
-    let result: string[] = []
+    let result: string[] = [...Object.keys(state.value || {})]
 
     if (!_variants) return result
 
@@ -26,7 +26,7 @@ export function registerEventListeners<T extends string, V extends MotionVariant
   })
 
   const computedProperties = computed(() => {
-    const result = {}
+    const result: Partial<V> = {}
 
     Object.assign(result, state.value)
 
@@ -37,7 +37,6 @@ export function registerEventListeners<T extends string, V extends MotionVariant
     if (focused.value && _variants.focused) Object.assign(result, _variants.focused)
 
     for (const key in result) {
-      // @ts-expect-error - Fix errors later for typescript 5
       if (!mutableKeys.value.includes(key)) delete result[key]
     }
 
diff --git a/src/features/lifeCycleHooks.ts b/src/features/lifeCycleHooks.ts
index a3eb0cde..6910e4e7 100644
--- a/src/features/lifeCycleHooks.ts
+++ b/src/features/lifeCycleHooks.ts
@@ -11,7 +11,14 @@ export function registerLifeCycleHooks<T extends string, V extends MotionVariant
       if (!_variants) return
 
       // Set initial before the element is mounted
-      if (_variants.initial) set('initial')
+      if (_variants.initial) {
+        // Set initial variant properties immediately, skipping transitions
+        set('initial')
+
+        // Set variant to sync `state` which is used to undo event variant transitions
+        // NOTE: This triggers an (instant) animation even though properties have already been applied
+        variant.value = 'initial'
+      }
 
       // Lifecycle hooks bindings
       if (_variants.enter) variant.value = 'enter'