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 type KeyOrCode = 'key' | 'code' export interface UseKeyPressOptions { - actInsideInputWithModifier?: MaybeRefOrGetter target?: MaybeRefOrGetter + actInsideInputWithModifier?: MaybeRefOrGetter + preventDefault?: MaybeRefOrGetter } +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, isKeyUp: boolean) { @@ -88,6 +91,8 @@ export function useKeyPress(keyFilter: MaybeRefOrGetter 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