From 8a6cad878a991ccddcc3dfacb731bf869894e7ce Mon Sep 17 00:00:00 2001
From: Ruslan Lekhman <lekhman112@gmail.com>
Date: Thu, 16 Sep 2021 15:34:34 -0600
Subject: [PATCH] fix(cdk/drag-drop): allow using cdkDragRootElement w/ comment
 tag

---
 src/cdk/drag-drop/directives/drag.spec.ts | 28 +++++++++++++++++++++++
 src/cdk/drag-drop/directives/drag.ts      | 11 ++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index ab9a1bf9431b..7cd237c5c87c 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -636,6 +636,19 @@ describe('CdkDrag', () => {
         expect(dragElement.style.transform).toBeFalsy();
       }));
 
+    it('should be able to set an alternate drag root element for ng-container', fakeAsync(() => {
+      const fixture = createComponent(DraggableNgContainerWithAlternateRoot);
+      fixture.detectChanges();
+
+      const dragRoot = fixture.componentInstance.dragRoot.nativeElement;
+
+      expect(dragRoot.style.transform).toBeFalsy();
+
+      dragElementViaMouse(fixture, dragRoot, 50, 100);
+
+      expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)');
+    }));
+
     it('should preserve the initial transform if the root element changes', fakeAsync(() => {
       const fixture = createComponent(DraggableWithAlternateRoot);
       fixture.detectChanges();
@@ -7150,6 +7163,21 @@ class DraggableWithRadioInputsInDropZone {
   ];
 }
 
+
+@Component({
+  template: `
+    <div #dragRoot class="alternate-root" style="width: 200px; height: 200px; background: hotpink">
+      <ng-container cdkDrag cdkDragRootElement=".alternate-root">
+        <div style="width: 100px; height: 100px; background: red;"></div>
+      </ng-container>
+    </div>
+  `
+})
+class DraggableNgContainerWithAlternateRoot {
+  @ViewChild('dragRoot') dragRoot: ElementRef<HTMLElement>;
+  @ViewChild(CdkDrag) dragInstance: CdkDrag;
+}
+
 /**
  * Drags an element to a position on the page using the mouse.
  * @param fixture Fixture on which to run change detection.
diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts
index fb2d216f81fd..eb3b7abc7335 100644
--- a/src/cdk/drag-drop/directives/drag.ts
+++ b/src/cdk/drag-drop/directives/drag.ts
@@ -330,9 +330,14 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
   /** Syncs the root element with the `DragRef`. */
   private _updateRootElement() {
-    const element = this.element.nativeElement;
-    const rootElement = this.rootElementSelector ?
-      element.closest<HTMLElement>(this.rootElementSelector) : element;
+    const element = this.element.nativeElement as HTMLElement;
+    let rootElement = element;
+    if (this.rootElementSelector) {
+      rootElement = element.closest !== undefined
+        ? element.closest(this.rootElementSelector) as HTMLElement
+        // Comment tag doesn't have closest method, so use parent's one.
+        : element.parentElement?.closest(this.rootElementSelector) as HTMLElement;
+    }
 
     if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       assertElementNode(rootElement, 'cdkDrag');