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( height, colorMode = 'light', debug, + onScroll, ...rest }: ReactFlowProps, ref: ForwardedRef @@ -151,10 +152,20 @@ function ReactFlow( 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) => { + e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' }); + onScroll?.(e); + }, + [onScroll] + ); + return (