fix(drag-drop): stop dragging sequence on touchcancel

Adds handling for the `touchcancel` event to the the `DragDropRegistry`.

Author: crisbeto

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

@@ -68,9 +68,9 @@ describe('DragDropRegistry', () => {
     const subscription = registry.pointerMove.subscribe(spy);
 
     registry.startDragging(testComponent.dragItems.first, createMouseEvent('mousedown'));
-    dispatchMouseEvent(document, 'mousemove');
+    const event = dispatchMouseEvent(document, 'mousemove');
 
-    expect(spy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalledWith(event);
 
     subscription.unsubscribe();
   });
@@ -81,9 +81,9 @@ describe('DragDropRegistry', () => {
 
     registry.startDragging(testComponent.dragItems.first,
         createTouchEvent('touchstart') as TouchEvent);
-    dispatchTouchEvent(document, 'touchmove');
+    const event = dispatchTouchEvent(document, 'touchmove');
 
-    expect(spy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalledWith(event);
 
     subscription.unsubscribe();
   });
@@ -106,9 +106,9 @@ describe('DragDropRegistry', () => {
     const subscription = registry.pointerUp.subscribe(spy);
 
     registry.startDragging(testComponent.dragItems.first, createMouseEvent('mousedown'));
-    dispatchMouseEvent(document, 'mouseup');
+    const event = dispatchMouseEvent(document, 'mouseup');
 
-    expect(spy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalledWith(event);
 
     subscription.unsubscribe();
   });
@@ -119,9 +119,22 @@ describe('DragDropRegistry', () => {
 
     registry.startDragging(testComponent.dragItems.first,
         createTouchEvent('touchstart') as TouchEvent);
-    dispatchTouchEvent(document, 'touchend');
+    const event = dispatchTouchEvent(document, 'touchend');
 
-    expect(spy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalledWith(event);
+
+    subscription.unsubscribe();
+  });
+
+  it('should dispatch `touchcancel` events if the drag was interrupted', () => {
+    const spy = jasmine.createSpy('pointerUp spy');
+    const subscription = registry.pointerUp.subscribe(spy);
+
+    registry.startDragging(testComponent.dragItems.first,
+        createTouchEvent('touchstart') as TouchEvent);
+    const event = dispatchTouchEvent(document, 'touchcancel');
+
+    expect(spy).toHaveBeenCalledWith(event);
 
     subscription.unsubscribe();
   });

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

@@ -43,10 +43,11 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
   private _activeDragInstances = new Set<I>();
 
   /** Keeps track of the event listeners that we've bound to the `document`. */
-  private _globalListeners = new Map<'touchmove' | 'mousemove' | 'touchend' | 'mouseup', {
-    handler: PointerEventHandler,
-    options?: AddEventListenerOptions | boolean
-  }>();
+  private _globalListeners =
+    new Map<'touchmove' | 'mousemove' | 'touchend' | 'mouseup' | 'touchcancel', {
+      handler: PointerEventHandler,
+      options?: AddEventListenerOptions | boolean
+    }>();
 
   /**
    * Emits the `touchmove` or `mousemove` events that are dispatched
@@ -119,6 +120,10 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
       const isTouchEvent = event.type.startsWith('touch');
       const moveEvent = isTouchEvent ? 'touchmove' : 'mousemove';
       const upEvent = isTouchEvent ? 'touchend' : 'mouseup';
+      const upConfig = {
+        handler: (e: TouchEvent | MouseEvent) => this.pointerUp.next(e),
+        options: activeCapturingEventOptions
+      };
 
       // We need to disable the native interactions on the entire body, because
       // the user can start marking text if they drag too far in Safari.
@@ -132,15 +137,21 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
           handler: e => this.pointerMove.next(e),
           options: activeCapturingEventOptions
         })
-        .set(upEvent, {
-          handler: e => this.pointerUp.next(e),
-          options: true
-        })
-        .forEach((config, name) => {
-          this._ngZone.runOutsideAngular(() => {
-            this._document.addEventListener(name, config.handler, config.options);
-          });
+        .set(upEvent, upConfig);
+
+      if (isTouchEvent) {
+        // Treat `touchcancel` events the same as `touchend`. `touchcancel` will fire for cases
+        // like an OS-level event interrupting the touch sequence or the user putting too many
+        // finger on the screen at the same time.
+        this._globalListeners.set('touchcancel', upConfig);
+      }
+
+      this._globalListeners.forEach((config, name) => {
+        this._ngZone.runOutsideAngular(() => {
+          this._document.addEventListener(name, config.handler, config.options);
         });
+      });
+
     }
   }