fix(drag-drop): defer resolving scrollable parents until first drag

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

@@ -17,7 +17,6 @@ import {
   Directive,
   ChangeDetectorRef,
   SkipSelf,
-  AfterContentInit,
   Inject,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
@@ -59,10 +58,13 @@ export interface CdkDropListInternal extends CdkDropList {}
     '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
   }
 })
-export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
+export class CdkDropList<T = any> implements OnDestroy {
   /** Emits when the list has been destroyed. */
   private _destroyed = new Subject<void>();
 
+  /** Whether the element's scrollable parents have been resolved. */
+  private _scrollableParentsResolved: boolean;
+
   /** Keeps track of the drop lists that are currently on the page. */
   private static _dropLists: CdkDropList[] = [];
 
@@ -183,16 +185,6 @@ export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
     }
   }
 
-  ngAfterContentInit() {
-    // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
-    if (this._scrollDispatcher) {
-      const scrollableParents = this._scrollDispatcher
-        .getAncestorScrollContainers(this.element)
-        .map(scrollable => scrollable.getElementRef().nativeElement);
-      this._dropListRef.withScrollableParents(scrollableParents);
-    }
-  }
-
   /** Registers an items with the drop list. */
   addItem(item: CdkDrag): void {
     this._unsortedItems.add(item);
@@ -321,6 +313,20 @@ export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
         });
       }
 
+      // Note that we resolve the scrollable parents here so that we delay the resolution
+      // as long as possible, ensuring that the element is in its final place in the DOM.
+      // @breaking-change 11.0.0 Remove null check for _scrollDispatcher once it's required.
+      if (!this._scrollableParentsResolved && this._scrollDispatcher) {
+        const scrollableParents = this._scrollDispatcher
+          .getAncestorScrollContainers(this.element)
+          .map(scrollable => scrollable.getElementRef().nativeElement);
+        this._dropListRef.withScrollableParents(scrollableParents);
+
+        // Only do this once since it involves traversing the DOM and the parents
+        // shouldn't be able to change without the drop list being destroyed.
+        this._scrollableParentsResolved = true;
+      }
+
       ref.disabled = this.disabled;
       ref.lockAxis = this.lockAxis;
       ref.sortingDisabled = coerceBooleanProperty(this.sortingDisabled);

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -145,7 +145,7 @@ export interface CdkDragStart<T = any> {
     source: CdkDrag<T>;
 }
 
-export declare class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
+export declare class CdkDropList<T = any> implements OnDestroy {
     _dropListRef: DropListRef<CdkDropList<T>>;
     autoScrollDisabled: boolean;
     connectedTo: (CdkDropList | string)[] | CdkDropList | string;
@@ -171,7 +171,6 @@ export declare class CdkDropList<T = any> implements AfterContentInit, OnDestroy
     exit(item: CdkDrag): void;
     getItemIndex(item: CdkDrag): number;
     getSortedItems(): CdkDrag[];
-    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     removeItem(item: CdkDrag): void;
     start(): void;