From ea54d9bcb197d02d248ef3e4eaabc033a43d966a Mon Sep 17 00:00:00 2001
From: Wayne Tee <waynetee37@gmail.com>
Date: Sat, 1 Feb 2025 12:48:09 +0800
Subject: [PATCH] fix(react): viewport shifting on node focus

---
 .changeset/cyan-pianos-lie.md                    |  5 +++++
 packages/react/src/container/ReactFlow/index.tsx | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cyan-pianos-lie.md

diff --git a/.changeset/cyan-pianos-lie.md b/.changeset/cyan-pianos-lie.md
new file mode 100644
index 00000000..2ff7301d
--- /dev/null
+++ b/.changeset/cyan-pianos-lie.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Fix viewport shifting on node focus
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 82206fc8..cf250628 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, type CSSProperties } from 'react';
+import { ForwardedRef, useCallback, type CSSProperties } from 'react';
 import cc from 'classcat';
 import { ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, isMacOs } from '@xyflow/system';
 
@@ -144,6 +144,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     height,
     colorMode = 'light',
     debug,
+    onScroll,
     ...rest
   }: ReactFlowProps<NodeType, EdgeType>,
   ref: ForwardedRef<HTMLDivElement>
@@ -151,10 +152,20 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   const rfId = id || '1';
   const colorModeClassName = useColorModeClass(colorMode);
 
+  // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
+  const wrapperOnScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+      onScroll?.(e);
+    },
+    [onScroll]
+  );
+
   return (
     <div
       data-testid="rf__wrapper"
       {...rest}
+      onScroll={wrapperOnScroll}
       style={{ ...style, ...wrapperStyle }}
       ref={ref}
       className={cc(['react-flow', className, colorModeClassName])}