From 763f107aade5ac4a3ba3256589746d8ab2fef266 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:07:31 +0200
Subject: [PATCH] fix(core): prevent calling selectionEnd on selection click
 (#1545)

* fix(core): prevent calling `selectionEnd` on selection click

* chore(changeset): add
---
 .changeset/silly-days-sniff.md            |  5 +++++
 packages/core/src/container/Pane/Pane.vue | 17 +++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/silly-days-sniff.md

diff --git a/.changeset/silly-days-sniff.md b/.changeset/silly-days-sniff.md
new file mode 100644
index 00000000..7df05156
--- /dev/null
+++ b/.changeset/silly-days-sniff.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Prevent calling `onSelectionEnd` when clicking a selection
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 5f837812..4661d97a 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -46,7 +46,8 @@ const edgeIdLookup = ref<Map<string, Set<string>>>(new Map())
 const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
 // Used to prevent click events when the user lets go of the selectionKey during a selection
-const selectionInProgress = ref(false)
+let selectionInProgress = false
+let selectionStarted = false
 
 const deleteKeyPressed = useKeyPress(deleteKeyCode, { actInsideInputWithModifier: false })
 
@@ -87,8 +88,8 @@ function resetUserSelection() {
 }
 
 function onClick(event: MouseEvent) {
-  if (selectionInProgress.value) {
-    selectionInProgress.value = false
+  if (selectionInProgress) {
+    selectionInProgress = false
     return
   }
 
@@ -128,6 +129,8 @@ function onPointerDown(event: PointerEvent) {
 
   const { x, y } = getMousePosition(event, containerBounds.value)
 
+  selectionStarted = true
+  selectionInProgress = false
   edgeIdLookup.value = new Map()
 
   for (const [id, edge] of edgeLookup.value) {
@@ -157,7 +160,7 @@ function onPointerMove(event: PointerEvent) {
     return
   }
 
-  selectionInProgress.value = true
+  selectionInProgress = true
 
   const { x: mouseX, y: mouseY } = getEventPosition(event, containerBounds.value)
   const { startX = 0, startY = 0 } = userSelectionRect.value
@@ -212,7 +215,7 @@ function onPointerMove(event: PointerEvent) {
 }
 
 function onPointerUp(event: PointerEvent) {
-  if (event.button !== 0) {
+  if (event.button !== 0 || !selectionStarted) {
     return
   }
 
@@ -235,8 +238,10 @@ function onPointerUp(event: PointerEvent) {
   // 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) {
-    selectionInProgress.value = false
+    selectionInProgress = false
   }
+
+  selectionStarted = false
 }
 </script>