feat(viewpane): block keypress on inputs and .nokey elements

# What's changed?

* revert keypress listener on input elements (except button)
* skip keypress events on elements with `.nokey` classname

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<boolean> => {
   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
     },

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<GraphNode[]>((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,
   })