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

bcakmakoglu · bcakmakoglu · commit 04d13551e373 · 2024-12-07T16:39:07.000+01:00
* fix(frontend,core): prevent scrolling when using arrow keys to move nodes

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* chore(changeset): add

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

---------

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;
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}`
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@vue-flow/core": patch
 +---
++
 +Prevent page scroll when using arrow keys to move nodes.
Original file line number	Diff line number	Diff line change
`@@ -408,6 +408,9 @@ const NodeWrapper = defineComponent({`
`408`	`408`	`nodeElement.value!,`
`409`	`409`	`)`
`410`	`410`	`} else if (isDraggable.value && node.selected && arrowKeyDiffs[event.key]) {`
	`411`	`+ // prevent page scrolling`
	`412`	`+ event.preventDefault()`
	`413`	`+`
`411`	`414`	ariaLiveMessage.value = `Moved selected node ${event.key.replace('Arrow', '').toLowerCase()}. New position, x: ${~~node
`412`	`415`	.position.x}, y: ${~~node.position.y}`
`413`	`416`