Merge pull request #4991 from waynetee/fix-viewport

Fix viewport shifting on node focus

.changeset/cyan-pianos-lie.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Fix viewport shifting on node focus

.changeset/sour-jobs-fold.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Prevent viewport shift after using Tab

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])}