From 967569aa6d75945fd5375fbaee6a4c2507af29f4 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 29 Mar 2025 16:52:12 +0100
Subject: [PATCH] fix(core): add button to elements to ignore in useKeyPress
 (#1807)

* fix(core): add button to elements to ignore in useKeyPress

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* fix(core): add prevent default option to useKeyPress

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/lemon-terms-joke.md               |  5 +++++
 packages/core/src/composables/useKeyPress.ts | 18 ++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/lemon-terms-joke.md

diff --git a/.changeset/lemon-terms-joke.md b/.changeset/lemon-terms-joke.md
new file mode 100644
index 00000000..5a1affc5
--- /dev/null
+++ b/.changeset/lemon-terms-joke.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Prevent keypress events from being swallowed when a button element is focused.
diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
index ee238b9a..da94a1da 100644
--- a/packages/core/src/composables/useKeyPress.ts
+++ b/packages/core/src/composables/useKeyPress.ts
@@ -7,10 +7,13 @@ type PressedKeys = Set<string>
 type KeyOrCode = 'key' | 'code'
 
 export interface UseKeyPressOptions {
-  actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
   target?: MaybeRefOrGetter<EventTarget | null | undefined>
+  actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
+  preventDefault?: MaybeRefOrGetter<boolean>
 }
 
+const inputTags = ['INPUT', 'SELECT', 'TEXTAREA']
+
 export function isInputDOMNode(event: KeyboardEvent): boolean {
   const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
 
@@ -19,12 +22,12 @@ export function isInputDOMNode(event: KeyboardEvent): boolean {
   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 inputTags.includes(target?.nodeName) || hasAttribute || !!closest
 }
 
 // we want to be able to do a multi selection event if we are in an input field
 function wasModifierPressed(event: KeyboardEvent) {
-  return event.ctrlKey || event.metaKey || event.shiftKey
+  return event.ctrlKey || event.metaKey || event.shiftKey || event.altKey
 }
 
 function isKeyMatch(pressedKey: string, keyToMatch: string, pressedKeys: Set<string>, isKeyUp: boolean) {
@@ -88,6 +91,8 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
 
   const target = toRef(() => toValue(options?.target) ?? window)
 
+  const preventDefault = toRef(() => toValue(options?.preventDefault) ?? true)
+
   const isPressed = ref(toValue(keyFilter) === true)
 
   let modifierPressed = false
@@ -124,7 +129,12 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter<KeyFilter | boolean | nu
         return
       }
 
-      e.preventDefault()
+      const target = (e.composedPath?.()?.[0] || e.target) as Element | null
+      const isInteractiveElement = target?.nodeName === 'BUTTON' || target?.nodeName === 'A'
+
+      if (!preventDefault.value && (modifierPressed || !isInteractiveElement)) {
+        e.preventDefault()
+      }
 
       isPressed.value = true
     },