fix(core): disable selection on drag when panning mode is active (#2014)

* fix(core): disable selection on drag when panning mode is active

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

.changeset/green-games-cough.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Disable selection on drag by setting the keycode to `true` when panning mode is active.

packages/core/src/container/Viewport/Viewport.vue

@@ -61,9 +61,7 @@ let prevTransform: ViewportTransform = {
 }
 
 const panKeyPressed = useKeyPress(panActivationKeyCode)
-
 const selectionKeyPressed = useKeyPress(selectionKeyCode)
-
 const zoomKeyPressed = useKeyPress(zoomActivationKeyCode)
 
 const shouldPanOnDrag = toRef(
@@ -74,7 +72,11 @@ const shouldPanOnDrag = toRef(
 
 const shouldPanOnScroll = toRef(() => panKeyPressed.value || panOnScroll.value)
 
-const isSelecting = toRef(() => selectionKeyPressed.value || (selectionKeyCode.value === true && shouldPanOnDrag.value !== true))
+const shouldSelectOnDrag = toRef(() => selectionKeyCode.value === true && shouldPanOnDrag.value !== true)
+
+const isSelecting = toRef(
+  () => (selectionKeyPressed.value && selectionKeyCode.value !== true) || userSelectionActive.value || shouldSelectOnDrag.value,
+)
 
 const connectionInProgress = toRef(() => connectionStartHandle.value !== null)
 
@@ -229,7 +231,7 @@ onMounted(() => {
     }
 
     // if selection key code is true and panOnDrag tries to use left mouse button we prevent it
-    if (selectionKeyCode.value === true && Array.isArray(panOnDrag.value) && panOnDrag.value.includes(0) && eventButton === 0) {
+    if (shouldSelectOnDrag.value && Array.isArray(panOnDrag.value) && panOnDrag.value.includes(0) && eventButton === 0) {
       return false
     }