fix: contextmenu may be shown while dragging

Author: danielkaradachki

e2e/draggable.js

@@ -1,5 +1,6 @@
 import Draggable from '../src/main';
 import { pointerdown, pointermove, pointerup } from './pointer-util';
+import { aMouseEvent } from './util';
 
 describe('Draggable with Pointer events', () => {
     let el;
@@ -196,5 +197,39 @@ describe('Draggable with Pointer events', () => {
             expect(handler).not.toHaveBeenCalled();
         });
     });
+
+    describe("contextmenu", () => {
+        beforeEach(() => {
+            draggable = new Draggable({});
+
+            draggable.bindTo(el);
+        });
+
+        it('prevents contextmenu while dragging', () => {
+            pointerdown(el, 100, 200);
+
+            const e = aMouseEvent('contextmenu');
+            spyOn(e, 'preventDefault');
+
+            el.dispatchEvent(e);
+
+            expect(e.preventDefault).toHaveBeenCalledTimes(1);
+
+
+            pointerup(el, 100, 200);
+        });
+
+        it('does not prevent contextmenu after release', () => {
+            pointerdown(el, 100, 200);
+            pointerup(el, 100, 200);
+
+            const e = aMouseEvent('contextmenu');
+            spyOn(e, 'preventDefault');
+
+            el.dispatchEvent(e);
+
+            expect(e.preventDefault).not.toHaveBeenCalled();
+        });
+    });
 });
 

e2e/util.js

@@ -1,15 +1,5 @@
 /* eslint max-params: [2, 5] */
 
-const aMouseEvent = (type, x, y, button) =>
-        new MouseEvent(type, {
-            bubbles: true,
-            cancelable: true,
-            view: window,
-            clientX: x,
-            clientY: y,
-            button: button
-        });
-
 const aTouch = (el, x, y, id) =>
     new Touch({
         identifier: id,
@@ -26,6 +16,16 @@ const aTouchEvent = (type, touches) =>
         changedTouches: touches
     });
 
+export const aMouseEvent = (type, x, y, button) =>
+        new MouseEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: x,
+            clientY: y,
+            button: button
+        });
+
 export function mousedown(element, x, y, button) {
     element.dispatchEvent(aMouseEvent("mousedown", x, y, button));
 }

src/main.js

@@ -8,6 +8,8 @@ const unbind = (el, event, callback) =>
 
 const noop = () => { /* empty */ };
 
+const preventDefault = e => e.preventDefault();
+
 const touchRegExp = /touch/;
 
 // 300ms is the usual mouse interval;
@@ -107,6 +109,7 @@ export class Draggable {
             if (e.isPrimary && e.button === 0) {
                 bind(this._element, "pointermove", this._pointermove);
                 bind(this._element, "pointerup", this._pointerup);
+                bind(this._element, "contextmenu", preventDefault);
 
                 this._touchAction = e.target.style.touchAction;
                 e.target.style.touchAction = "none";
@@ -126,6 +129,7 @@ export class Draggable {
             if (e.isPrimary) {
                 unbind(this._element, "pointermove", this._pointermove);
                 unbind(this._element, "pointerup", this._pointerup);
+                unbind(this._element, "contextmenu", preventDefault);
 
                 e.target.style.touchAction = this._touchAction;
                 e.target.releasePointerCapture(e.pointerId);