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

@@ -69,9 +69,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();
   });
@@ -82,9 +82,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();
   });
@@ -107,9 +107,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();
   });
@@ -120,9 +120,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' | 'wheel', {
-    handler: PointerEventHandler,
-    options?: AddEventListenerOptions | boolean
-  }>();
+  private _globalListeners =
+    new Map<'touchmove' | 'mousemove' | 'touchend' | 'mouseup' | 'touchcancel' | 'wheel', {
+      handler: PointerEventHandler,
+      options?: AddEventListenerOptions | boolean
+    }>();
 
   /**
    * Emits the `touchmove` or `mousemove` events that are dispatched
@@ -122,6 +123,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: true
+      };
 
       // 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.
@@ -135,14 +140,16 @@ 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
-        });
-
-      // TODO(crisbeto): prevent mouse wheel scrolling while
-      // dragging until we've set up proper scroll handling.
-      if (!isTouchEvent) {
+        .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);
+      } else {
+        // TODO(crisbeto): prevent mouse wheel scrolling while
+        // dragging until we've set up proper scroll handling.
         this._globalListeners.set('wheel', {
           handler: this._preventScrollListener,
           options: activeCapturingEventOptions