fix(drag-drop): position reset if viewport is resized while boundary is invisible (#17777)

If a dragged item is inside a boundary, we update its position on window resize to ensure that it stays inside the boundary. If a resize event happens while the boundary is hidden, we end up resetting the user's position unintentionally. These changes add a check that prevents the position from changing if the elements are hidden.

Fixes #17750.

Author: crisbeto

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

@@ -800,6 +800,23 @@ describe('CdkDrag', () => {
         expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
       }));
 
+    it('should keep the old position if the boundary is invisible after a resize', 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)');
+
+      boundary.style.display = 'none';
+      dispatchFakeEvent(window, 'resize');
+      tick(20);
+
+      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);

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

@@ -1123,6 +1123,14 @@ export class DragRef<T = any> {
 
     const boundaryRect = this._boundaryElement.getBoundingClientRect();
     const elementRect = this._rootElement.getBoundingClientRect();
+
+    // It's possible that the element got hidden away after dragging (e.g. by switching to a
+    // different tab). Don't do anything in this case so we don't clear the user's position.
+    if ((boundaryRect.width === 0 && boundaryRect.height === 0) ||
+        (elementRect.width === 0 && elementRect.height === 0)) {
+      return;
+    }
+
     const leftOverflow = boundaryRect.left - elementRect.left;
     const rightOverflow = elementRect.right - boundaryRect.right;
     const topOverflow = boundaryRect.top - elementRect.top;