diff --git a/src/cdk/drag-drop/directives/standalone-drag.spec.ts b/src/cdk/drag-drop/directives/standalone-drag.spec.ts index c4449abe204e..d6b6be72a72b 100644 --- a/src/cdk/drag-drop/directives/standalone-drag.spec.ts +++ b/src/cdk/drag-drop/directives/standalone-drag.spec.ts @@ -364,6 +364,22 @@ describe('Standalone CdkDrag', () => { expect(dragElement.style.transform).toBeFalsy(); })); + + it('should stop dragging on touchcancel', fakeAsync(() => { + const fixture = createComponent(StandaloneDraggable); + fixture.detectChanges(); + const dragElement = fixture.componentInstance.dragElement.nativeElement; + const x = 50; + const y = 100; + + expect(dragElement.style.transform).toBeFalsy(); + startDraggingViaTouch(fixture, dragElement); + continueDraggingViaTouch(fixture, x, y); + dispatchTouchEvent(document, 'touchcancel', x, y); + fixture.detectChanges(); + expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)'); + expect(fixture.componentInstance.endedSpy).toHaveBeenCalled(); + })); }); describe('mouse dragging when initial transform is none', () => { diff --git a/src/cdk/drag-drop/drag-drop-registry.spec.ts b/src/cdk/drag-drop/drag-drop-registry.spec.ts index 935b94ba5908..5d12b15e5c42 100644 --- a/src/cdk/drag-drop/drag-drop-registry.spec.ts +++ b/src/cdk/drag-drop/drag-drop-registry.spec.ts @@ -243,6 +243,19 @@ describe('DragDropRegistry', () => { subscription.unsubscribe(); }); + it('should dispatch `touchcancel` events if the drag was interrupted', () => { + const spy = jasmine.createSpy('pointerUp spy'); + const subscription = registry.pointerUp.subscribe(spy); + const item = new DragItem() as unknown as DragRef; + + registry.startDragging(item, createTouchEvent('touchstart') as TouchEvent); + const event = dispatchTouchEvent(document, 'touchcancel'); + + expect(spy).toHaveBeenCalledWith(event); + + subscription.unsubscribe(); + }); + class DragItem { isDragging() { return this.shouldBeDragging; diff --git a/src/cdk/drag-drop/drag-drop-registry.ts b/src/cdk/drag-drop/drag-drop-registry.ts index a8e2bd079fc7..5667c6f78a47 100644 --- a/src/cdk/drag-drop/drag-drop-registry.ts +++ b/src/cdk/drag-drop/drag-drop-registry.ts @@ -170,16 +170,23 @@ export class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy { this._activeDragInstances.update(instances => [...instances, drag]); if (this._activeDragInstances().length === 1) { - const isTouchEvent = event.type.startsWith('touch'); - // 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 // use `preventDefault` to prevent the page from scrolling while the user is dragging. + const isTouchEvent = event.type.startsWith('touch'); + const endEventHandler = { + handler: (e: Event) => this.pointerUp.next(e as TouchEvent | MouseEvent), + options: true, + }; + + if (isTouchEvent) { + this._globalListeners.set('touchend', endEventHandler); + this._globalListeners.set('touchcancel', endEventHandler); + } else { + this._globalListeners.set('mouseup', endEventHandler); + } + this._globalListeners - .set(isTouchEvent ? 'touchend' : 'mouseup', { - handler: (e: Event) => this.pointerUp.next(e as TouchEvent | MouseEvent), - options: true, - }) .set('scroll', { handler: (e: Event) => this.scroll.next(e), // Use capturing so that we pick up scroll changes in any scrollable nodes that aren't