From 04d13551e373d7c4cce7b743a1a6e57f0e4be9e4 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 29 Nov 2024 07:12:29 +0100
Subject: [PATCH] fix(frontend,core): prevent scrolling when using arrow keys
 to move nodes (#1698)

* fix(frontend,core): prevent scrolling when using arrow keys to move nodes

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

* chore(changeset): add

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

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/clever-eyes-leave.md                   | 5 +++++
 packages/core/src/components/Nodes/NodeWrapper.ts | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 .changeset/clever-eyes-leave.md

diff --git a/.changeset/clever-eyes-leave.md b/.changeset/clever-eyes-leave.md
new file mode 100644
index 00000000..f1ca0003
--- /dev/null
+++ 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
index d54d7691..546ec96d 100644
--- 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}`