fix: don't trigger release when the element was not pressed with poin…

…ter events
telerik · Jul 5, 2018 · bd7ded8 · bd7ded8
1 parent ad34a83
commit bd7ded8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/e2e/draggable.js b/e2e/draggable.js
@@ -121,23 +121,30 @@ describe('Draggable with Pointer events', () => {
             });
 
             draggable.bindTo(el);
+        });
 
+        it("triggers release on pointerup", () => {
             pointerdown(el, 100, 200);
             pointermove(el, 101, 201);
             pointerup(el, 101, 201);
+
+            expect(handler).toHaveBeenCalledTimes(1);
         });
 
-        it("triggers release on pointerup", () => {
-            expect(handler).toHaveBeenCalled();
+        it("does not trigger release if the element was not pressed", () => {
+            pointerup(el, 100, 200);
+            expect(handler).not.toHaveBeenCalled();
         });
 
         it("disposes drag handlers properly", () => {
             draggable.destroy();
             draggable = null;
 
+            pointerdown(el, 100, 200);
+            pointermove(el, 101, 201);
             pointerup(el, 101, 201);
 
-            expect(handler).toHaveBeenCalledTimes(1);
+            expect(handler).not.toHaveBeenCalled();
         });
 
         it("restores auto touch-action on pointerup", () => {
@@ -152,6 +159,7 @@ describe('Draggable with Pointer events', () => {
             pointerup(el, 100, 200);
             expect(el.style.touchAction).toEqual('pan-y');
         });
+
     });
 
     describe("with mouseOnly set to true", () => {

diff --git a/src/main.js b/src/main.js
@@ -101,9 +101,12 @@ export class Draggable {
         this._pointerdown = (e) => {
             if (e.isPrimary && e.button === 0) {
                 bind(this._element, "pointermove", this._pointermove);
+                bind(this._element, "pointerup", this._pointerup);
+
                 this._touchAction = e.target.style.touchAction;
                 e.target.style.touchAction = "none";
                 e.target.setPointerCapture(e.pointerId);
+
                 this._pressHandler(e);
             }
         };
@@ -117,8 +120,11 @@ export class Draggable {
         this._pointerup = (e) => {
             if (e.isPrimary) {
                 unbind(this._element, "pointermove", this._pointermove);
+                unbind(this._element, "pointerup", this._pointerup);
+
                 e.target.style.touchAction = this._touchAction;
                 e.target.releasePointerCapture(e.pointerId);
+
                 this._releaseHandler(e);
             }
         };
@@ -142,7 +148,6 @@ export class Draggable {
 
         if (this._usePointers()) {
             bind(element, "pointerdown", this._pointerdown);
-            bind(element, "pointerup", this._pointerup);
             return;
         }