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

@@ -118,6 +118,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: Event) => this.pointerUp.next(e as TouchEvent | MouseEvent),
+        options: true
+      };
 
       // We explicitly bind __active__ listeners here, because newer browsers will default to
       // passive ones for `mousemove` and `touchmove`. The events need to be active, because we
@@ -127,10 +131,7 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
           handler: (e: Event) => this.pointerMove.next(e as TouchEvent | MouseEvent),
           options: activeCapturingEventOptions
         })
-        .set(upEvent, {
-          handler: (e: Event) => this.pointerUp.next(e as TouchEvent | MouseEvent),
-          options: true
-        })
+        .set(upEvent, upConfig)
         // Preventing the default action on `mousemove` isn't enough to disable text selection
         // on Safari so we need to prevent the selection event as well. Alternatively this can
         // be done by setting `user-select: none` on the `body`, however it has causes a style
@@ -140,9 +141,14 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
           options: activeCapturingEventOptions
         });
 
-      // TODO(crisbeto): prevent mouse wheel scrolling while
-      // dragging until we've set up proper scroll handling.
-      if (!isTouchEvent) {
+      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._preventDefaultWhileDragging,
           options: activeCapturingEventOptions