fix(drag-drop): incorrectly constraining element position if size changes between drag sequences (#16876)

When a drag sequence is started we cache the dimensions of the element and the boundary so that we don't have to cause a reflow for each pixel of dragging, however with the current logic the cached dimensions are only cleared for the case where the item is part of a drop list. As a result, if a freely-dragged item with a boundary changes size between drag sequences its position won't be constrained correctly anymore.

These changes fix the issue by correctly clearing the cached dimensions in all cases.

Fixes #15749.

Author: crisbeto

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

@@ -763,6 +763,25 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)');
     }));
 
+    it('should handle the element and boundary dimensions changing between drag sequences',
+      fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggable);
+        const boundary: HTMLElement = fixture.nativeElement.querySelector('.wrapper');
+        fixture.componentInstance.boundary = boundary;
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        dragElementViaMouse(fixture, dragElement, 300, 300);
+        expect(dragElement.style.transform).toBe('translate3d(100px, 100px, 0px)');
+
+        // Bump the width and height of both the boundary and the drag element.
+        boundary.style.width = boundary.style.height = '300px';
+        dragElement.style.width = dragElement.style.height = '150px';
+
+        dragElementViaMouse(fixture, dragElement, 300, 300);
+        expect(dragElement.style.transform).toBe('translate3d(150px, 150px, 0px)');
+      }));
+
     it('should allow for the position constrain logic to be customized', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       const spy = jasmine.createSpy('constrain position spy').and.returnValue({

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

@@ -626,6 +626,7 @@ export class DragRef<T = any> {
       this._dropContainer._stopScrolling();
       this._animatePreviewToPlaceholder().then(() => {
         this._cleanupDragArtifacts(event);
+        this._cleanupCachedDimensions();
         this._dragDropRegistry.stopDragging(this);
       });
     } else {
@@ -640,6 +641,7 @@ export class DragRef<T = any> {
           distance: this._getDragDistance(this._getPointerPositionOnPage(event))
         });
       });
+      this._cleanupCachedDimensions();
       this._dragDropRegistry.stopDragging(this);
     }
   }
@@ -1079,6 +1081,11 @@ export class DragRef<T = any> {
 
     return {x: 0, y: 0};
   }
+
+  /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */
+  private _cleanupCachedDimensions() {
+    this._boundaryRect = this._previewRect = undefined;
+  }
 }
 
 /** Point on the page or within an element. */