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({ onContextMenu, onDoubleClick, nodesDraggable, - autoPanOnNodeFocus, elementsSelectable, nodesConnectable, nodesFocusable, @@ -162,11 +161,16 @@ export function NodeWrapper({ }; 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 = 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(props: NodeRendererProps) { - 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(props: NodeRendererProps = { nodesConnectable: boolean; elementsSelectable: boolean; nodesDraggable: boolean; - autoPanOnNodeFocus: boolean; nodesFocusable: boolean; onClick?: NodeMouseHandler; onDoubleClick?: NodeMouseHandler; 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; /**