fix(drag-drop): error if item is removed while dragging (#15950)

Fixes the drop list throwing an error if an item is removed after the user started dragging, because we still have it in the position cache.

Fixes #15827.

Author: crisbeto

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

@@ -2515,6 +2515,27 @@ describe('CdkDrag', () => {
           .toEqual(['Zero', 'One', 'Two', 'Three']);
     }));
 
+    it('should not throw if an item is removed after dragging has started', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZone);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+      const firstElement = dragItems.first.element.nativeElement;
+      const lastItemRect = dragItems.last.element.nativeElement.getBoundingClientRect();
+
+      // Start dragging.
+      startDraggingViaMouse(fixture, firstElement);
+
+      // Remove the last item.
+      fixture.componentInstance.items.pop();
+      fixture.detectChanges();
+
+      expect(() => {
+        // Move the dragged item over where the remove item would've been.
+        dispatchMouseEvent(document, 'mousemove', lastItemRect.left + 1, lastItemRect.top + 1);
+        fixture.detectChanges();
+        flush();
+      }).not.toThrow();
+    }));
 
   });
 

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

@@ -176,9 +176,7 @@ export class DropListRef<T = any> {
   start(): void {
     this.beforeStarted.next();
     this._isDragging = true;
-    this._activeDraggables = this._draggables.slice();
-    this._cacheOwnPosition();
-    this._cacheItemPositions();
+    this._cacheItems();
     this._siblings.forEach(sibling => sibling._startReceiving(this));
   }
 
@@ -276,6 +274,11 @@ export class DropListRef<T = any> {
   withItems(items: DragRef[]): this {
     this._draggables = items;
     items.forEach(item => item._withDropContainer(this));
+
+    if (this.isDragging()) {
+      this._cacheItems();
+    }
+
     return this;
   }
 
@@ -566,6 +569,13 @@ export class DropListRef<T = any> {
     });
   }
 
+  /** Caches the current items in the list and their positions. */
+  private _cacheItems(): void {
+    this._activeDraggables = this._draggables.slice();
+    this._cacheItemPositions();
+    this._cacheOwnPosition();
+  }
+
   /**
    * Checks whether the user's pointer is positioned over the container.
    * @param x Pointer position along the X axis.