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
ghiscoding · Nov 23, 2023 · 47cb36e · 47cb36e
1 parent 182bfc6
commit 47cb36e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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