fix(cdk/drag-drop): allow using cdkDragRootElement w/ comment tag

Author: lekhmanrus

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

@@ -636,6 +636,22 @@ 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;
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragRoot.style.transform).toBeFalsy();
+      expect(dragElement.style.transform).toBeFalsy();
+
+      dragElementViaMouse(fixture, dragRoot, 50, 100);
+
+      expect(dragRoot.style.transform).toBe('translate3d(50px, 100px, 0px)');
+      expect(dragElement.style.transform).toBeFalsy();
+    }));
+
     it('should preserve the initial transform if the root element changes', fakeAsync(() => {
       const fixture = createComponent(DraggableWithAlternateRoot);
       fixture.detectChanges();
@@ -7150,6 +7166,22 @@ class DraggableWithRadioInputsInDropZone {
   ];
 }
 
+
+@Component({
+  template: `
+    <div #dragRoot class="alternate-root" style="width: 200px; height: 200px; background: hotpink">
+      <ng-container cdkDrag cdkDragRootElement=".alternate-root" #dragElement>
+        <div style="width: 100px; height: 100px; background: red;"></div>
+      </ng-container>
+    </div>
+  `
+})
+class DraggableNgContainerWithAlternateRoot {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @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.

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

@@ -330,9 +330,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
 
   /** Syncs the root element with the `DragRef`. */
   private _updateRootElement() {
-    const element = this.element.nativeElement;
+    const element = this.element.nativeElement as HTMLElement;
+    // Comment tag doesn't have closest method, so use parent's one.
+    const closestFn = (element.closest || element.parentElement?.closest)?.bind(this);
     const rootElement = this.rootElementSelector ?
-      element.closest<HTMLElement>(this.rootElementSelector) : element;
+      closestFn<HTMLElement>(this.rootElementSelector) : element;
 
     if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       assertElementNode(rootElement, 'cdkDrag');