fix(drag-drop): unable to drop into connected list inside shad… (#17424)

In #16899 we added some logic to account for connected drop lists inside the shadow DOM, however the logic was put in the constructor which is too early since the element might not be moved into the shadow DOM yet, if it is inserted through something like `ngFor` or `ngIf`.

These changes fix the issue by resolving the shadow root lazily the first time it is requested, which should be more than enough time for the element to have been moved into the shadow DOM.

Fixes #17422.

Author: crisbeto

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

@@ -4233,6 +4233,40 @@ describe('CdkDrag', () => {
       });
     }));
 
+    it('should be able to drop into a new container inside the Shadow DOM and ngIf',
+      fakeAsync(() => {
+        // This test is only relevant for Shadow DOM-supporting browsers.
+        if (!_supportsShadowDom()) {
+          return;
+        }
+
+        const fixture = createComponent(ConnectedDropZonesInsideShadowRootWithNgIf);
+        fixture.detectChanges();
+
+        const groups = fixture.componentInstance.groupedDragItems;
+        const item = groups[0][1];
+        const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
+
+        dragElementViaMouse(fixture, item.element.nativeElement,
+          targetRect.left + 1, targetRect.top + 1);
+        flush();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+
+        const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+        expect(event).toEqual({
+          previousIndex: 1,
+          currentIndex: 3,
+          item,
+          container: fixture.componentInstance.dropInstances.toArray()[1],
+          previousContainer: fixture.componentInstance.dropInstances.first,
+          isPointerOverContainer: true,
+          distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
+        });
+      }));
+
   });
 
   describe('with nested drags', () => {
@@ -4744,6 +4778,13 @@ class ConnectedDropZones implements AfterViewInit {
 class ConnectedDropZonesInsideShadowRoot extends ConnectedDropZones {
 }
 
+@Component({
+  encapsulation: ViewEncapsulation.ShadowDom,
+  styles: CONNECTED_DROP_ZONES_STYLES,
+  template: `<div *ngIf="true">${CONNECTED_DROP_ZONES_TEMPLATE}</div>`
+})
+class ConnectedDropZonesInsideShadowRootWithNgIf extends ConnectedDropZones {
+}
 
 @Component({
   encapsulation: ViewEncapsulation.None,

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

@@ -190,16 +190,19 @@ export class DropListRef<T = any> {
   private _stopScrollTimers = new Subject<void>();
 
   /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
-  private _shadowRoot: DocumentOrShadowRoot;
+  private _cachedShadowRoot: DocumentOrShadowRoot | null = null;
+
+  /** Reference to the document. */
+  private _document: Document;
 
   constructor(
     element: ElementRef<HTMLElement> | HTMLElement,
     private _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>,
     _document: any,
     private _ngZone: NgZone,
     private _viewportRuler: ViewportRuler) {
-    const nativeNode = this.element = coerceElement(element);
-    this._shadowRoot = getShadowRoot(nativeNode) || _document;
+    this.element = coerceElement(element);
+    this._document = _document;
     _dragDropRegistry.registerDropContainer(this);
   }
 
@@ -785,7 +788,7 @@ export class DropListRef<T = any> {
       return false;
     }
 
-    const elementFromPoint = this._shadowRoot.elementFromPoint(x, y) as HTMLElement | null;
+    const elementFromPoint = this._getShadowRoot().elementFromPoint(x, y) as HTMLElement | null;
 
     // If there's no element at the pointer position, then
     // the client rect is probably scrolled out of the view.
@@ -843,6 +846,20 @@ export class DropListRef<T = any> {
       }
     });
   }
+
+  /**
+   * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
+   * than saving it in property directly on init, because we want to resolve it as late as possible
+   * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
+   * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
+   */
+  private _getShadowRoot(): DocumentOrShadowRoot {
+    if (!this._cachedShadowRoot) {
+      this._cachedShadowRoot = getShadowRoot(coerceElement(this.element)) || this._document;
+    }
+
+    return this._cachedShadowRoot;
+  }
 }