diff --git a/.changeset/modern-pumpkins-juggle.md b/.changeset/modern-pumpkins-juggle.md new file mode 100644 index 00000000..67ce0ba5 --- /dev/null +++ b/.changeset/modern-pumpkins-juggle.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +fix(selection): dont trigger onSelectionEnd on click diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx index 34c0be13..727970e3 100644 --- a/packages/react/src/container/FlowRenderer/index.tsx +++ b/packages/react/src/container/FlowRenderer/index.tsx @@ -77,7 +77,8 @@ function FlowRendererComponent({ const panOnDrag = panActivationKeyPressed || _panOnDrag; const panOnScroll = panActivationKeyPressed || _panOnScroll; - const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true); + const _selectionOnDrag = selectionOnDrag && panOnDrag !== true; + const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag; useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); @@ -117,6 +118,7 @@ function FlowRendererComponent({ isSelecting={!!isSelecting} selectionMode={selectionMode} selectionKeyPressed={selectionKeyPressed} + selectionOnDrag={_selectionOnDrag} > {children} {nodesSelectionActive && ( diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index a0bd5ba3..3fd1d079 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -35,6 +35,7 @@ type PaneProps = { | 'onPaneMouseEnter' | 'onPaneMouseMove' | 'onPaneMouseLeave' + | 'selectionOnDrag' > >; @@ -61,6 +62,7 @@ export function Pane({ selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, + selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, @@ -83,6 +85,7 @@ export function Pane({ // Used to prevent click events when the user lets go of the selectionKey during a selection const selectionInProgress = useRef(false); + const selectionStarted = useRef(false); const resetUserSelection = () => { store.setState({ userSelectionActive: false, userSelectionRect: null }); @@ -129,6 +132,8 @@ export function Pane({ return; } + selectionStarted.current = true; + selectionInProgress.current = false; edgeIdLookup.current = new Map(); for (const [id, edge] of edgeLookup) { @@ -219,7 +224,7 @@ export function Pane({ }; const onPointerUp = (event: ReactPointerEvent) => { - if (event.button !== 0) { + if (event.button !== 0 || !selectionStarted.current) { return; } @@ -240,9 +245,11 @@ export function Pane({ // If the user kept holding the selectionKey during the selection, // we need to reset the selectionInProgress, so the next click event is not prevented - if (selectionKeyPressed) { + if (selectionKeyPressed || selectionOnDrag) { selectionInProgress.current = false; } + + selectionStarted.current = false; }; return (