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}`