perf(core): cleanup possible re-bindings of listeners in useKeyPress

packages/core/src/composables/useKeyPress.ts

@@ -2,17 +2,22 @@ import { ref, watch } from 'vue'
 import type { KeyFilter, KeyPredicate, MaybeRefOrGetter } from '@vueuse/core'
 import { onKeyStroke, toValue, useEventListener } from '@vueuse/core'
 import { useWindow } from './useWindow'
-import { isBoolean, isFunction, isString } from '~/utils'
 
 export function isInputDOMNode(event: KeyboardEvent): boolean {
   const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
 
-  const hasAttribute = isFunction(target.hasAttribute) ? target.hasAttribute('contenteditable') : false
+  const hasAttribute = typeof target.hasAttribute === 'function' ? target.hasAttribute('contenteditable') : false
 
-  const closest = isFunction(target.closest) ? target.closest('.nokey') : null
+  const closest = typeof target.closest === 'function' ? target.closest('.nokey') : null
 
   // when an input field is focused we don't want to trigger deletion or movement of nodes
-  return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || hasAttribute || !!closest
+  return (
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement ||
+    hasAttribute ||
+    !!closest
+  )
 }
 
 // we want to be able to do a multi selection event if we are in an input field
@@ -75,41 +80,37 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, onCha
 
   const pressedKeys = new Set<string>()
 
-  watch(isPressed, (isKeyPressed) => {
+  let currentFilter = createKeyFilterFn(toValue(keyFilter))
+
+  watch(isPressed, (isKeyPressed, wasPressed) => {
+    if (isKeyPressed !== wasPressed) {
       onChange?.(isKeyPressed)
+    }
   })
 
   watch(
     () => toValue(keyFilter),
     (nextKeyFilter, previousKeyFilter) => {
+      // if the previous keyFilter was a boolean but is now something else, we need to reset the isPressed value
+      if (typeof previousKeyFilter === 'boolean' && typeof nextKeyFilter !== 'boolean') {
+        reset()
+      }
+
+      currentFilter = createKeyFilterFn(nextKeyFilter)
+    },
+    {
+      immediate: true,
+    },
+  )
+
   useEventListener(window, 'blur', () => {
+    if (toValue(keyFilter) !== true) {
       isPressed.value = false
+    }
   })
 
-      // if the previous keyFilter was a boolean but is now something else, we need to reset the isPressed value
-      if (isBoolean(previousKeyFilter) && !isBoolean(nextKeyFilter)) {
-        reset()
-      }
-
-      // if the keyFilter is null, we just set the isPressed value to false
-      if (nextKeyFilter === null) {
-        reset()
-        return
-      }
-
-      // if the keyFilter is a boolean, we just set the isPressed value to that boolean
-      if (isBoolean(nextKeyFilter)) {
-        isPressed.value = nextKeyFilter
-        return
-      }
-
-      if (Array.isArray(nextKeyFilter) || isString(nextKeyFilter)) {
-        nextKeyFilter = createKeyPredicate(nextKeyFilter, pressedKeys)
-      }
-
-      if (nextKeyFilter) {
   onKeyStroke(
-          nextKeyFilter,
+    (...args) => currentFilter(...args),
     (e) => {
       modifierPressed = wasModifierPressed(e)
 
@@ -125,7 +126,7 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, onCha
   )
 
   onKeyStroke(
-          nextKeyFilter,
+    (...args) => currentFilter(...args),
     (e) => {
       if (isPressed.value) {
         if (!modifierPressed && isInputDOMNode(e)) {
@@ -137,12 +138,6 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, onCha
     },
     { eventName: 'keyup' },
   )
-      }
-    },
-    {
-      immediate: true,
-    },
-  )
 
   return isPressed
 
@@ -153,4 +148,29 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | null>, onCha
 
     isPressed.value = false
   }
+
+  function createKeyFilterFn(keyFilter: KeyFilter | null) {
+    // if the keyFilter is null, we just set the isPressed value to false
+    if (keyFilter === null) {
+      reset()
+      return () => false
+    }
+
+    // if the keyFilter is a boolean, we just set the isPressed value to that boolean
+    if (typeof keyFilter === 'boolean') {
+      if (keyFilter) {
+        isPressed.value = keyFilter
+        return () => true
+      } else {
+        reset()
+        return () => false
+      }
+    }
+
+    if (Array.isArray(keyFilter) || typeof keyFilter === 'string') {
+      return createKeyPredicate(keyFilter, pressedKeys)
+    }
+
+    return () => false
+  }
 }