fix(drag-drop): handle custom preview/placeholder with multiple root nodes (#18829)

We support passing in a custom preview or placeholder using an `ng-template`, but we were only taking the first `rootNode` from the template.

Author: crisbeto

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

@@ -2995,6 +2995,21 @@ describe('CdkDrag', () => {
       expect(preview.textContent!.trim()).toContain('Hello One');
     }));
 
+    it('should handle custom preview with multiple root nodes', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZoneWithCustomMultiNodePreview);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+
+      expect(() => {
+        startDraggingViaMouse(fixture, item);
+      }).not.toThrow();
+
+      const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement;
+
+      expect(preview).toBeTruthy();
+      expect(preview.textContent!.trim()).toContain('HelloOne');
+    }));
+
     it('should be able to customize the placeholder', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZoneWithCustomPlaceholder);
       fixture.detectChanges();
@@ -3067,6 +3082,21 @@ describe('CdkDrag', () => {
       expect(placeholder.textContent!.trim()).toContain('Hello One');
     }));
 
+    it('should handle custom placeholder with multiple root nodes', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZoneWithCustomMultiNodePlaceholder);
+      fixture.detectChanges();
+      const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+
+      expect(() => {
+        startDraggingViaMouse(fixture, item);
+      }).not.toThrow();
+
+      const placeholder = document.querySelector('.cdk-drag-placeholder')! as HTMLElement;
+
+      expect(placeholder).toBeTruthy();
+      expect(placeholder.textContent!.trim()).toContain('HelloOne');
+    }));
+
     it('should clear the `transform` value from siblings when item is dropped`', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZone);
       fixture.detectChanges();
@@ -5209,6 +5239,28 @@ class DraggableInDropZoneWithCustomTextOnlyPreview {
 }
 
 
+@Component({
+  template: `
+    <div cdkDropList style="width: 100px; background: pink;">
+      <div
+        *ngFor="let item of items"
+        cdkDrag
+        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+          {{item}}
+          <ng-template cdkDragPreview>
+            <span>Hello</span>
+            <span>{{item}}</span>
+          </ng-template>
+      </div>
+    </div>
+  `
+})
+class DraggableInDropZoneWithCustomMultiNodePreview {
+  @ViewChild(CdkDropList) dropInstance: CdkDropList;
+  @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
+  items = ['Zero', 'One', 'Two', 'Three'];
+}
+
 @Component({
   template: `
     <div
@@ -5257,6 +5309,25 @@ class DraggableInDropZoneWithCustomTextOnlyPlaceholder {
   items = ['Zero', 'One', 'Two', 'Three'];
 }
 
+@Component({
+  template: `
+    <div cdkDropList style="width: 100px; background: pink;">
+      <div *ngFor="let item of items" cdkDrag
+        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+          {{item}}
+          <ng-template cdkDragPlaceholder>
+            <span>Hello</span>
+            <span>{{item}}</span>
+          </ng-template>
+      </div>
+    </div>
+  `
+})
+class DraggableInDropZoneWithCustomMultiNodePlaceholder {
+  @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
+  items = ['Zero', 'One', 'Two', 'Three'];
+}
+
 const CONNECTED_DROP_ZONES_STYLES = [`
   .cdk-drop-list {
     display: block;

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

@@ -1302,15 +1302,15 @@ function getPreviewInsertionPoint(documentRef: any): HTMLElement {
  * If the root is not an HTML element it gets wrapped in one.
  */
 function getRootNode(viewRef: EmbeddedViewRef<any>, _document: Document): HTMLElement {
-  const rootNode: Node = viewRef.rootNodes[0];
+  const rootNodes: Node[] = viewRef.rootNodes;
 
-  if (rootNode.nodeType !== _document.ELEMENT_NODE) {
-    const wrapper = _document.createElement('div');
-    wrapper.appendChild(rootNode);
-    return wrapper;
+  if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+    return rootNodes[0] as HTMLElement;
   }
 
-  return rootNode as HTMLElement;
+  const wrapper = _document.createElement('div');
+  rootNodes.forEach(node => wrapper.appendChild(node));
+  return wrapper;
 }
 
 /**