diff --git a/packages/vue-flow/src/composables/useKeyPress.ts b/packages/vue-flow/src/composables/useKeyPress.ts index 8a5ad20d..7f839250 100644 --- a/packages/vue-flow/src/composables/useKeyPress.ts +++ b/packages/vue-flow/src/composables/useKeyPress.ts @@ -2,6 +2,16 @@ import type { Ref } from 'vue' import type { KeyFilter } from '@vueuse/core' import useWindow from './useWindow' +function isInputDOMNode(event: KeyboardEvent): boolean { + const target = event.target as HTMLElement + + return ( + ['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.nodeName) || + target?.hasAttribute('contenteditable') || + !!target?.closest('.nokey') + ) +} + export default (keyFilter: KeyFilter, onChange?: (keyPressed: boolean) => void): Ref => { const window = useWindow() @@ -14,6 +24,8 @@ export default (keyFilter: KeyFilter, onChange?: (keyPressed: boolean) => void): onKeyStroke( keyFilter, (e) => { + if (isInputDOMNode(e)) return + e.preventDefault() isPressed = true }, @@ -23,6 +35,8 @@ export default (keyFilter: KeyFilter, onChange?: (keyPressed: boolean) => void): onKeyStroke( keyFilter, (e) => { + if (isInputDOMNode(e)) return + e.preventDefault() isPressed = false }, diff --git a/packages/vue-flow/src/container/SelectionPane/SelectionPane.vue b/packages/vue-flow/src/container/SelectionPane/SelectionPane.vue index b17f8e79..cdfc38fd 100644 --- a/packages/vue-flow/src/container/SelectionPane/SelectionPane.vue +++ b/packages/vue-flow/src/container/SelectionPane/SelectionPane.vue @@ -41,6 +41,8 @@ const onMouseLeave = (event: MouseEvent) => emits.paneMouseLeave(event) const onMouseMove = (event: MouseEvent) => emits.paneMouseMove(event) useKeyPress(deleteKeyCode, (keyPressed) => { + if (!keyPressed) return + const nodesToRemove = getNodes.reduce((res, node) => { if (!node.selected && node.parentNode && res.find((n) => n.id === node.parentNode)) { res.push(node) @@ -53,7 +55,7 @@ useKeyPress(deleteKeyCode, (keyPressed) => { const selectedEdges = edges.filter((e) => e.selected) - if (keyPressed && (nodesToRemove || selectedEdges)) { + if (nodesToRemove || selectedEdges) { if (selectedEdges.length > 0) { removeEdges(selectedEdges) } @@ -78,6 +80,7 @@ useKeyPress(multiSelectionKeyCode, (keyPressed) => { const selectionKeyPressed = useKeyPress(selectionKeyCode, (keyPressed) => { if (userSelectionActive && keyPressed) return + setState({ userSelectionActive: keyPressed && elementsSelectable, })