fix(drag-drop): events fired multiple times for short drag sequences on touch devices

Fixes the `started` and `ended` events being fired multiple times for short drag sequences on touch devices. The issue comes from the fact that we listen both for mouse and touch events, which means that we also pick up the fake events that are fired by mobile browsers.

Fixes #13125.

Author: crisbeto

src/cdk/drag-drop/drag.spec.ts

@@ -443,7 +443,32 @@ describe('CdkDrag', () => {
         .not.toEqual('none', 'should not disable touchAction on when there is a drag handle');
     });
 
-  });
+    it('should not dispatch multiple events for a mouse event right after a touch event',
+      fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggable);
+        fixture.detectChanges();
+
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        // Dispatch a touch sequence.
+        dispatchTouchEvent(dragElement, 'touchstart');
+        fixture.detectChanges();
+        dispatchTouchEvent(dragElement, 'touchend');
+        fixture.detectChanges();
+        tick();
+
+        // Immediately dispatch a mouse sequence to simulate a fake event.
+        startDraggingViaMouse(fixture, dragElement);
+        fixture.detectChanges();
+        dispatchMouseEvent(dragElement, 'mouseup');
+        fixture.detectChanges();
+        tick();
+
+        expect(fixture.componentInstance.startedSpy).toHaveBeenCalledTimes(1);
+        expect(fixture.componentInstance.endedSpy).toHaveBeenCalledTimes(1);
+      }));
+
+    });
 
   describe('draggable with a handle', () => {
     it('should not be able to drag the entire element if it has a handle', fakeAsync(() => {

src/cdk/drag-drop/drag.ts

@@ -82,6 +82,14 @@ export function CDK_DRAG_CONFIG_FACTORY(): CdkDragConfig {
 /** Options that can be used to bind a passive event listener. */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({passive: true});
 
+/**
+ * Time in milliseconds for which to ignore mouse events, after
+ * receiving a touch event. Used to avoid doing double work for
+ * touch devices where the browser fires fake mouse events, in
+ * addition to touch events.
+ */
+const MOUSE_EVENT_IGNORE_TIME = 800;
+
 /** Element that can be moved inside a CdkDropList container. */
 @Directive({
   selector: '[cdkDrag]',
@@ -174,6 +182,12 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
 
   /** Subscription to the event that is dispatched when the user lifts their pointer. */
   private _pointerUpSubscription = Subscription.EMPTY;
+  /**
+   * Time at which the last touch event occurred. Used to avoid firing the same
+   * events multiple times on touch devices where the browser will fire a fake
+   * mouse event for each touch event, after a certain time.
+   */
+  private _lastTouchEventTime: number;
 
   /** Subscription to the stream that initializes the root element. */
   private _rootElementInitSubscription = Subscription.EMPTY;
@@ -347,8 +361,14 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
     // starting another sequence for a draggable parent somewhere up the DOM tree.
     event.stopPropagation();
 
+    const isDragging = this._isDragging();
+    const isTouchEvent = this._isTouchEvent(event);
+    const isAuxiliaryMouseButton = !isTouchEvent && (event as MouseEvent).button !== 0;
+    const isSyntheticEvent = !isTouchEvent && this._lastTouchEventTime &&
+        this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();
+
     // Abort if the user is already dragging or is using a mouse button other than the primary one.
-    if (this._isDragging() || (!this._isTouchEvent(event) && event.button !== 0)) {
+    if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent) {
       return;
     }
 
@@ -375,10 +395,14 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
   }
 
   /** Starts the dragging sequence. */
-  private _startDragSequence() {
+  private _startDragSequence(event: MouseEvent | TouchEvent) {
     // Emit the event on the item before the one on the container.
     this.started.emit({source: this});
 
+    if (this._isTouchEvent(event)) {
+      this._lastTouchEventTime = Date.now();
+    }
+
     if (this.dropContainer) {
       const element = this._rootElement;
 
@@ -413,7 +437,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
       // per pixel of movement (e.g. if the user moves their pointer quickly).
       if (distanceX + distanceY >= this._config.dragStartThreshold) {
         this._hasStartedDragging = true;
-        this._ngZone.run(() => this._startDragSequence());
+        this._ngZone.run(() => this._startDragSequence(event));
       }
 
       return;
@@ -473,10 +497,14 @@ export class CdkDrag<T = any> implements AfterViewInit, OnDestroy {
       this._passiveTransform.x = this._activeTransform.x;
       this._passiveTransform.y = this._activeTransform.y;
       this._ngZone.run(() => this.ended.emit({source: this}));
+      this._dragDropRegistry.stopDragging(this);
       return;
     }
 
-    this._animatePreviewToPlaceholder().then(() => this._cleanupDragArtifacts());
+    this._animatePreviewToPlaceholder().then(() => {
+      this._cleanupDragArtifacts();
+      this._dragDropRegistry.stopDragging(this);
+    });
   }
 
   /** Cleans up the DOM artifacts that were added to facilitate the element being dragged. */