fix(frontend,core): prevent scrolling when using arrow keys to move n…

…odes (#1698) * fix(frontend,core): prevent scrolling when using arrow keys to move nodes Signed-off-by: braks <[email protected]> * chore(changeset): add Signed-off-by: braks <[email protected]> --------- Signed-off-by: braks <[email protected]>
bcakmakoglu · Nov 29, 2024 · 7cc1c5a · 7cc1c5a
1 parent 0d24680
commit 7cc1c5a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/clever-eyes-leave.md b/.changeset/clever-eyes-leave.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Prevent page scroll when using arrow keys to move nodes.
diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts
@@ -408,6 +408,9 @@ const NodeWrapper = defineComponent({
           nodeElement.value!,
         )
       } else if (isDraggable.value && node.selected && arrowKeyDiffs[event.key]) {
+        // prevent page scrolling
+        event.preventDefault()
+
         ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
           .position.x}, y: ${~~node.position.y}`