fix(drag-drop): preview matchSize sometimes incorrect inside flex container (#19062)

We create a custom preview through `ViewContainerRef.createEmbeddedView` and we move it to the correct place in the DOM. The problem is that for the brief period that it's in the DOM, we also measure the host node if the `matchSize` option is set. In some cases (e.g. a flex container), this can throw off the size. These changes switch to measuring the size ahead of time when necessary.

Fixes #19060.

Author: crisbeto

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

@@ -3013,6 +3013,23 @@ describe('CdkDrag', () => {
         expect(preview.style.transform).toBe('translate3d(8px, 33px, 0px)');
       }));
 
+    it('should not have the size of the inserted preview affect the size applied via matchSize',
+      fakeAsync(() => {
+        const fixture = createComponent(DraggableInHorizontalFlexDropZoneWithMatchSizePreview);
+        fixture.detectChanges();
+        const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+        const itemRect = item.getBoundingClientRect();
+
+        startDraggingViaMouse(fixture, item);
+        fixture.detectChanges();
+
+        const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement;
+        const previewRect = preview.getBoundingClientRect();
+
+        expect(Math.floor(previewRect.width)).toBe(Math.floor(itemRect.width));
+        expect(Math.floor(previewRect.height)).toBe(Math.floor(itemRect.height));
+      }));
+
     it('should not throw when custom preview only has text', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZoneWithCustomTextOnlyPreview);
       fixture.detectChanges();
@@ -5792,6 +5809,40 @@ class PlainStandaloneDropList {
   @ViewChild(CdkDropList) dropList: CdkDropList;
 }
 
+
+@Component({
+  styles: [`
+    .list {
+      display: flex;
+      width: 100px;
+      flex-direction: row;
+    }
+
+    .item {
+      display: flex;
+      flex-grow: 1;
+      flex-basis: 0;
+      min-height: 50px;
+    }
+  `],
+  template: `
+    <div class="list" cdkDropList cdkDropListOrientation="horizontal">
+      <div *ngFor="let item of items" class="item" cdkDrag>
+        {{item}}
+
+        <ng-template cdkDragPreview [matchSize]="true">
+          <div class="item">{{item}}</div>
+        </ng-template>
+      </div>
+    </div>
+  `
+})
+class DraggableInHorizontalFlexDropZoneWithMatchSizePreview {
+  @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
+  items = ['Zero', 'One', 'Two'];
+}
+
+
 /**
  * Drags an element to a position on the page using the mouse.
  * @param fixture Fixture on which to run change detection.

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

@@ -887,23 +887,25 @@ export class DragRef<T = any> {
     const previewTemplate = previewConfig ? previewConfig.template : null;
     let preview: HTMLElement;
 
-    if (previewTemplate) {
-      const viewRef = previewConfig!.viewContainer.createEmbeddedView(previewTemplate,
-                                                                      previewConfig!.context);
+    if (previewTemplate && previewConfig) {
+      // Measure the element before we've inserted the preview
+      // since the insertion could throw off the measurement.
+      const rootRect = previewConfig.matchSize ? this._rootElement.getBoundingClientRect() : null;
+      const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate,
+                                                                     previewConfig.context);
       viewRef.detectChanges();
       preview = getRootNode(viewRef, this._document);
       this._previewRef = viewRef;
-
-      if (previewConfig!.matchSize) {
-        matchElementSize(preview, this._rootElement);
+      if (previewConfig.matchSize) {
+        matchElementSize(preview, rootRect!);
       } else {
         preview.style.transform =
             getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
       }
     } else {
       const element = this._rootElement;
       preview = deepCloneNode(element);
-      matchElementSize(preview, element);
+      matchElementSize(preview, element.getBoundingClientRect());
     }
 
     extendStyles(preview.style, {
@@ -1332,11 +1334,9 @@ function getRootNode(viewRef: EmbeddedViewRef<any>, _document: Document): HTMLEl
 /**
  * Matches the target element's size to the source's size.
  * @param target Element that needs to be resized.
- * @param source Element whose size needs to be matched.
+ * @param sourceRect Dimensions of the source element.
  */
-function matchElementSize(target: HTMLElement, source: HTMLElement): void {
-  const sourceRect = source.getBoundingClientRect();
-
+function matchElementSize(target: HTMLElement, sourceRect: ClientRect): void {
   target.style.width = `${sourceRect.width}px`;
   target.style.height = `${sourceRect.height}px`;
   target.style.transform = getTransform(sourceRect.left, sourceRect.top);