Merge pull request #4862 from bcakmakoglu/fix/arrow-move

fix(react): prevent default scrolling behavior when node is moved with arrow keypress

.changeset/silly-beans-remain.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Prevent default scrolling behavior when nodes or a selection is moved with an arrow key press.

packages/react/src/components/NodeWrapper/index.tsx

@@ -138,6 +138,9 @@ export function NodeWrapper<NodeType extends Node>({
         nodeRef,
       });
     } else if (isDraggable && node.selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+      // prevent default scrolling behavior on arrow key press when node is moved
+      event.preventDefault();
+
       store.setState({
         ariaLiveMessage: `Moved selected node ${event.key
           .replace('Arrow', '')

packages/react/src/components/NodesSelection/index.tsx

@@ -68,6 +68,8 @@ export function NodesSelection<NodeType extends Node>({
 
   const onKeyDown = (event: KeyboardEvent) => {
     if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
+      event.preventDefault();
+
       moveSelectedNodes({
         direction: arrowKeyDiffs[event.key],
         factor: event.shiftKey ? 4 : 1,