From 47cb36e78995f70933807aa33ba3afa0fecf491e Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Thu, 23 Nov 2023 15:37:02 -0500
Subject: [PATCH] fix: Draggable shouldn't trigger dragEnd without first
 dragging (#1211)

- the `onDragEnd` was called every time a cell was clicked even when user was not even dragging, we should make sure to only trigger `onDragEnd` if a drag actually started to avoid triggering too many events for no reasons
---
 .../src/examples/example16.ts                        |  4 ++--
 packages/common/src/core/slickInteractions.ts        | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
index 62607c71e..af361499e 100644
--- a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
+++ b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
@@ -235,7 +235,7 @@ export default class Example16 {
           // OR 2- use a Promise
           collectionAsync: new Promise<any>((resolve) => {
             setTimeout(() => {
-              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
+              resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
             }, 500);
           }),
           customStructure: {
@@ -252,7 +252,7 @@ export default class Example16 {
           // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
           collectionAsync: new Promise((resolve) => {
             setTimeout(() => {
-              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
+              resolve(Array.from(Array((this.dataset || []).length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
             });
           }),
           customStructure: {
diff --git a/packages/common/src/core/slickInteractions.ts b/packages/common/src/core/slickInteractions.ts
index edfe45c5c..3aeb70bd9 100644
--- a/packages/common/src/core/slickInteractions.ts
+++ b/packages/common/src/core/slickInteractions.ts
@@ -105,15 +105,19 @@ export function Draggable(options: DraggableOption) {
   }
 
   function userReleased(event: MouseEvent | TouchEvent) {
-    const { target } = event;
-    originaldd = Object.assign(originaldd, { target });
-    executeDragCallbackWhenDefined(onDragEnd, event, originaldd as DragItem);
     document.body.removeEventListener('mousemove', userMoved);
     document.body.removeEventListener('touchmove', userMoved);
     document.body.removeEventListener('mouseup', userReleased);
     document.body.removeEventListener('touchend', userReleased);
     document.body.removeEventListener('touchcancel', userReleased);
-    dragStarted = false;
+
+    // trigger a dragEnd event only after dragging started and stopped
+    if (dragStarted) {
+      const { target } = event;
+      originaldd = Object.assign(originaldd, { target });
+      executeDragCallbackWhenDefined(onDragEnd, event, originaldd as DragItem);
+      dragStarted = false;
+    }
   }
 
   // initialize Slick.MouseWheel by attaching mousewheel event