From 85dcbf4b46eb961b51969b2ebceead3da2413b8b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 5 May 2023 09:16:33 +0200
Subject: [PATCH] fix(core): pass selectionKeyCode ref to useKeyPress

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useKeyPress.ts  | 92 ++++++++++---------
 .../core/src/container/Viewport/Viewport.vue  |  2 +-
 2 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
index 5a59deb1..f0a502e7 100644
--- a/packages/core/src/composables/useKeyPress.ts
+++ b/packages/core/src/composables/useKeyPress.ts
@@ -51,60 +51,64 @@ export default (keyFilter: MaybeComputedRef<KeyFilter | null>, onChange?: (keyPr
     onChange?.(isPressed.value)
   })
 
-  watchEffect(() => {
-    let unrefKeyFilter = resolveUnref(keyFilter)
+  watch(
+    () => resolveUnref(keyFilter),
+    (unrefKeyFilter) => {
+      if (window && typeof window.addEventListener !== 'undefined') {
+        useEventListener(window, 'blur', () => {
+          isPressed.value = false
+        })
+      }
 
-    if (window && typeof window.addEventListener !== 'undefined') {
-      useEventListener(window, 'blur', () => {
-        isPressed.value = false
-      })
-    }
+      if (isBoolean(unrefKeyFilter)) {
+        isPressed.value = unrefKeyFilter
+        return
+      }
 
-    if (isBoolean(unrefKeyFilter)) {
-      isPressed.value = unrefKeyFilter
-      return
-    }
+      if (Array.isArray(unrefKeyFilter)) {
+        unrefKeyFilter = createKeyPredicate(unrefKeyFilter, pressedKeys.value)
+      }
 
-    if (Array.isArray(unrefKeyFilter)) {
-      unrefKeyFilter = createKeyPredicate(unrefKeyFilter, pressedKeys.value)
-    }
+      if (unrefKeyFilter) {
+        onKeyStroke(
+          unrefKeyFilter,
+          (e) => {
+            modifierPressed.value = wasModifierPressed(e)
 
-    if (unrefKeyFilter) {
-      onKeyStroke(
-        unrefKeyFilter,
-        (e) => {
-          modifierPressed.value = wasModifierPressed(e)
-
-          if (!modifierPressed.value && isInputDOMNode(e)) {
-            return
-          }
-
-          e.preventDefault()
-
-          isPressed.value = true
-        },
-        { eventName: 'keydown' },
-      )
-
-      onKeyStroke(
-        unrefKeyFilter,
-        (e) => {
-          if (isPressed.value) {
             if (!modifierPressed.value && isInputDOMNode(e)) {
               return
             }
 
-            modifierPressed.value = false
+            e.preventDefault()
 
-            pressedKeys.value.clear()
+            isPressed.value = true
+          },
+          { eventName: 'keydown' },
+        )
 
-            isPressed.value = false
-          }
-        },
-        { eventName: 'keyup' },
-      )
-    }
-  })
+        onKeyStroke(
+          unrefKeyFilter,
+          (e) => {
+            if (isPressed.value) {
+              if (!modifierPressed.value && isInputDOMNode(e)) {
+                return
+              }
+
+              modifierPressed.value = false
+
+              pressedKeys.value.clear()
+
+              isPressed.value = false
+            }
+          },
+          { eventName: 'keyup' },
+        )
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
 
   return isPressed
 }
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index b7be77c3..61957d2f 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -92,7 +92,7 @@ onMounted(() => {
     viewportRef: viewportElement,
   })
 
-  useKeyPress(selectionKeyCode, (keyPress) => {
+  useKeyPress($$(selectionKeyCode), (keyPress) => {
     selectionKeyPressed = keyPress
   })