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, 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 })