fix(drag-drop): not stopping drag if page is blurred

Currently the only way to stop a drag sequence is via a `mouseup`/`touchend` event or by destroying the instance, however if the page loses focus while dragging the events won't be dispatched anymore and user will have to click again to stop dragging. These changes add some extra code that listens for `blur` events on the `window` and stops dragging.

Fixes #17537.

Author: crisbeto

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

@@ -3456,6 +3456,28 @@ describe('CdkDrag', () => {
       expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
           .toEqual(['One', 'Two', 'Zero', 'Three']);
     }));
+
+    it('should stop dragging if the page is blurred', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+
+      expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled();
+
+      const item = dragItems.first;
+      const targetRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect();
+
+      startDraggingViaMouse(fixture, item.element.nativeElement);
+      dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1);
+      fixture.detectChanges();
+
+      dispatchFakeEvent(window, 'blur');
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+    }));
+
   });
 
   describe('in a connected drop container', () => {

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

@@ -237,6 +237,17 @@ describe('DragDropRegistry', () => {
     subscription.unsubscribe();
   });
 
+  it('should dispatch an event if the window is blurred while scrolling', () => {
+    const spy = jasmine.createSpy('blur spy');
+    const subscription = registry.pageBlurred.subscribe(spy);
+
+    registry.startDragging(testComponent.dragItems.first, createMouseEvent('mousedown'));
+    dispatchFakeEvent(window, 'blur');
+
+    expect(spy).toHaveBeenCalled();
+    subscription.unsubscribe();
+  });
+
 });
 
 @Component({

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

@@ -28,6 +28,7 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({
 @Injectable({providedIn: 'root'})
 export class DragDropRegistry<I, C> implements OnDestroy {
   private _document: Document;
+  private _window: Window | null;
 
   /** Registered drop container instances. */
   private _dropInstances = new Set<C>();
@@ -41,28 +42,36 @@ export class DragDropRegistry<I, C> implements OnDestroy {
   /** Keeps track of the event listeners that we've bound to the `document`. */
   private _globalListeners = new Map<string, {
     handler: (event: Event) => void,
+    // The target needs to be `| null` because we bind either to `window` or `document` which
+    // aren't available during SSR. There's an injection token for the document, but not one for
+    // window so we fall back to not binding events to it.
+    target: EventTarget | null,
     options?: AddEventListenerOptions | boolean
   }>();
 
   /**
    * Emits the `touchmove` or `mousemove` events that are dispatched
    * while the user is dragging a drag item instance.
    */
-  readonly pointerMove: Subject<TouchEvent | MouseEvent> = new Subject<TouchEvent | MouseEvent>();
+  pointerMove: Subject<TouchEvent | MouseEvent> = new Subject<TouchEvent | MouseEvent>();
 
   /**
    * Emits the `touchend` or `mouseup` events that are dispatched
    * while the user is dragging a drag item instance.
    */
-  readonly pointerUp: Subject<TouchEvent | MouseEvent> = new Subject<TouchEvent | MouseEvent>();
+  pointerUp: Subject<TouchEvent | MouseEvent> = new Subject<TouchEvent | MouseEvent>();
 
   /** Emits when the viewport has been scrolled while the user is dragging an item. */
-  readonly scroll: Subject<Event> = new Subject<Event>();
+  scroll: Subject<Event> = new Subject<Event>();
+
+  /** Emits when the page has been blurred while the user is dragging an item. */
+  pageBlurred: Subject<void> = new Subject<void>();
 
   constructor(
     private _ngZone: NgZone,
     @Inject(DOCUMENT) _document: any) {
     this._document = _document;
+    this._window = (typeof window !== 'undefined' && window.addEventListener) ? window : null;
   }
 
   /** Adds a drop container to the registry. */
@@ -129,30 +138,40 @@ export class DragDropRegistry<I, C> implements OnDestroy {
       this._globalListeners
         .set(moveEvent, {
           handler: (e: Event) => this.pointerMove.next(e as TouchEvent | MouseEvent),
-          options: activeCapturingEventOptions
+          options: activeCapturingEventOptions,
+          target: this._document
         })
         .set(upEvent, {
           handler: (e: Event) => this.pointerUp.next(e as TouchEvent | MouseEvent),
-          options: true
+          options: true,
+          target: this._document
         })
         .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
           // the document. See https://github.com/angular/components/issues/17144.
-          options: true
+          options: true,
+          target: this._document
         })
         // 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
         // recalculation which can be expensive on pages with a lot of elements.
         .set('selectstart', {
           handler: this._preventDefaultWhileDragging,
-          options: activeCapturingEventOptions
+          options: activeCapturingEventOptions,
+          target: this._document
+        })
+        .set('blur', {
+          handler: () => this.pageBlurred.next(),
+          target: this._window // Note that this event can only be bound on the window, not document
         });
 
       this._ngZone.runOutsideAngular(() => {
         this._globalListeners.forEach((config, name) => {
-          this._document.addEventListener(name, config.handler, config.options);
+          if (config.target) {
+            config.target.addEventListener(name, config.handler, config.options);
+          }
         });
       });
     }
@@ -178,6 +197,7 @@ export class DragDropRegistry<I, C> implements OnDestroy {
     this._clearGlobalListeners();
     this.pointerMove.complete();
     this.pointerUp.complete();
+    this.pageBlurred.complete();
   }
 
   /**
@@ -193,7 +213,9 @@ export class DragDropRegistry<I, C> implements OnDestroy {
   /** Clears out the global event listeners from the `document`. */
   private _clearGlobalListeners() {
     this._globalListeners.forEach((config, name) => {
-      this._document.removeEventListener(name, config.handler, config.options);
+      if (config.target) {
+        config.target.removeEventListener(name, config.handler, config.options);
+      }
     });
 
     this._globalListeners.clear();

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

@@ -160,13 +160,19 @@ export class DragRef<T = any> {
   /** Subscription to the viewport being resized. */
   private _resizeSubscription = Subscription.EMPTY;
 
+  /** Subscription to the page being blurred. */
+  private _blurSubscription = 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;
 
+  /** Last pointer move event that was captured. */
+  private _lastPointerMove: MouseEvent | TouchEvent | null;
+
   /** Time at which the last dragging sequence was started. */
   private _dragStartTime: number;
 
@@ -394,7 +400,7 @@ export class DragRef<T = any> {
     this._dropContainer = undefined;
     this._resizeSubscription.unsubscribe();
     this._boundaryElement = this._rootElement = this._placeholderTemplate =
-        this._previewTemplate = this._nextSibling = null!;
+        this._previewTemplate = this._nextSibling = this._lastPointerMove = null!;
   }
 
   /** Checks whether the element is currently being dragged. */
@@ -476,6 +482,7 @@ export class DragRef<T = any> {
     this._pointerMoveSubscription.unsubscribe();
     this._pointerUpSubscription.unsubscribe();
     this._scrollSubscription.unsubscribe();
+    this._blurSubscription.unsubscribe();
   }
 
   /** Destroys the preview element and its ViewRef. */
@@ -565,6 +572,7 @@ export class DragRef<T = any> {
 
     const constrainedPointerPosition = this._getConstrainedPointerPosition(event);
     this._hasMoved = true;
+    this._lastPointerMove = event;
     event.preventDefault();
     this._updatePointerDirectionDelta(constrainedPointerPosition);
 
@@ -734,6 +742,7 @@ export class DragRef<T = any> {
 
     this._hasStartedDragging = this._hasMoved = false;
     this._initialContainer = this._dropContainer!;
+    this._lastPointerMove = null;
 
     // Avoid multiple subscriptions and memory leaks when multi touch
     // (isDragging check above isn't enough because of possible temporal and/or dimensional delays)
@@ -744,6 +753,15 @@ export class DragRef<T = any> {
       this._scrollPosition = this._viewportRuler.getViewportScrollPosition();
     });
 
+    // If the page is blurred while dragging (e.g. there was an `alert` or the browser window was
+    // minimized) we won't get a mouseup/touchend so we need to use a different event to stop the
+    // drag sequence. Use the last known location to figure out where the element should be dropped.
+    this._blurSubscription = this._dragDropRegistry.pageBlurred.subscribe(() => {
+      if (this._lastPointerMove) {
+        this._endDragSequence(this._lastPointerMove);
+      }
+    });
+
     if (this._boundaryElement) {
       this._boundaryRect = this._boundaryElement.getBoundingClientRect();
     }

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -201,9 +201,10 @@ export declare class DragDropModule {
 }
 
 export declare class DragDropRegistry<I, C> implements OnDestroy {
-    readonly pointerMove: Subject<TouchEvent | MouseEvent>;
-    readonly pointerUp: Subject<TouchEvent | MouseEvent>;
-    readonly scroll: Subject<Event>;
+    pageBlurred: Subject<void>;
+    pointerMove: Subject<TouchEvent | MouseEvent>;
+    pointerUp: Subject<TouchEvent | MouseEvent>;
+    scroll: Subject<Event>;
     constructor(_ngZone: NgZone, _document: any);
     isDragging(drag: I): boolean;
     ngOnDestroy(): void;