From 34274eb44d9c70bb7ac12f8d4901399770b0a1d3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 10 Jun 2025 09:19:23 +0200
Subject: [PATCH] chore(autoPanOnNodeFocus): cleanup

---
 packages/react/src/components/NodeWrapper/index.tsx   | 10 +++++++---
 packages/react/src/container/NodeRenderer/index.tsx   |  5 +----
 packages/react/src/types/component-props.ts           |  2 +-
 packages/react/src/types/nodes.ts                     |  1 -
 packages/svelte/src/lib/container/SvelteFlow/types.ts |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index 6d3b17b0..46e1ee01 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -29,7 +29,6 @@ export function NodeWrapper<NodeType extends Node>({
   onContextMenu,
   onDoubleClick,
   nodesDraggable,
-  autoPanOnNodeFocus,
   elementsSelectable,
   nodesConnectable,
   nodesFocusable,
@@ -162,11 +161,16 @@ export function NodeWrapper<NodeType extends Node>({
   };
 
   const onFocus = () => {
-    if (disableKeyboardA11y || !autoPanOnNodeFocus || !nodeRef.current?.matches(':focus-visible')) {
+    if (disableKeyboardA11y || !nodeRef.current?.matches(':focus-visible')) {
+      return;
+    }
+
+    const { transform, width, height, autoPanOnNodeFocus, setCenter } = store.getState();
+
+    if (!autoPanOnNodeFocus) {
       return;
     }
 
-    const { transform, width, height, setCenter } = store.getState();
     const withinViewport =
       getNodesInside(new Map([[id, node]]), { x: 0, y: 0, width, height }, transform, true).length > 0;
 
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 22d7a54f..0b055bdb 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -29,7 +29,6 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
 
 const selector = (s: ReactFlowState) => ({
   nodesDraggable: s.nodesDraggable,
-  autoPanOnNodeFocus: s.autoPanOnNodeFocus,
   nodesConnectable: s.nodesConnectable,
   nodesFocusable: s.nodesFocusable,
   elementsSelectable: s.elementsSelectable,
@@ -37,8 +36,7 @@ const selector = (s: ReactFlowState) => ({
 });
 
 function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<NodeType>) {
-  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, autoPanOnNodeFocus, onError } =
-    useStore(selector, shallow);
+  const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore(selector, shallow);
   const nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements);
   const resizeObserver = useResizeObserver();
 
@@ -88,7 +86,6 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
             disableKeyboardA11y={props.disableKeyboardA11y}
             resizeObserver={resizeObserver}
             nodesDraggable={nodesDraggable}
-            autoPanOnNodeFocus={autoPanOnNodeFocus}
             nodesConnectable={nodesConnectable}
             nodesFocusable={nodesFocusable}
             elementsSelectable={elementsSelectable}
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 7168e334..fc8b94a6 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -385,7 +385,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   nodesDraggable?: boolean;
   /**
    * When `true`, the viewport will pan when a node is focused.
-   * @default false
+   * @default true
    */
   autoPanOnNodeFocus?: boolean;
   /**
diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts
index 95ed91b3..d9e2671b 100644
--- a/packages/react/src/types/nodes.ts
+++ b/packages/react/src/types/nodes.ts
@@ -48,7 +48,6 @@ export type NodeWrapperProps<NodeType extends Node> = {
   nodesConnectable: boolean;
   elementsSelectable: boolean;
   nodesDraggable: boolean;
-  autoPanOnNodeFocus: boolean;
   nodesFocusable: boolean;
   onClick?: NodeMouseHandler<NodeType>;
   onDoubleClick?: NodeMouseHandler<NodeType>;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index b3dcb6cb..d575db1a 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -234,7 +234,7 @@ export type SvelteFlowProps<
     nodesDraggable?: boolean;
     /**
      * When `true`, the viewport will pan when a node is focused.
-     * @default false
+     * @default true
      */
     autoPanOnNodeFocus?: boolean;
     /**