fix(drag-drop): not picking up indirect descendant items (#17226)

Fixes that the drop list doesn't pick up drop items that aren't direct descendants. This was put in on purpose before to try and enforce a simpler DOM structure, but it could be limiting in some cases (e.g. if users want to put an `ngSwitch` with an `ng-container` around it).

These changes also add some extra logic to ensure that items aren't picked up by more than one ancestor list.

Fixes #17047.

Author: crisbeto

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

@@ -3358,6 +3358,57 @@ describe('CdkDrag', () => {
         cleanup();
       }));
 
+    it('should pick up descendants inside of containers', fakeAsync(() => {
+      const fixture = createComponent(DraggableInDropZoneWithContainer);
+      fixture.detectChanges();
+      const dragItems = fixture.componentInstance.dragItems;
+      const firstItem = dragItems.first;
+      const thirdItemRect = dragItems.toArray()[2].element.nativeElement.getBoundingClientRect();
+
+      dragElementViaMouse(fixture, firstItem.element.nativeElement,
+          thirdItemRect.left + 1, thirdItemRect.top + 1);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.droppedSpy).toHaveBeenCalledTimes(1);
+
+      const event = fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];
+
+      // Assert the event like this, rather than `toHaveBeenCalledWith`, because Jasmine will
+      // go into an infinite loop trying to stringify the event, if the test fails.
+      expect(event).toEqual({
+        previousIndex: 0,
+        currentIndex: 2,
+        item: firstItem,
+        container: fixture.componentInstance.dropInstance,
+        previousContainer: fixture.componentInstance.dropInstance,
+        isPointerOverContainer: true,
+        distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
+      });
+    }));
+
+    it('should not pick up items from descendant drop lists', fakeAsync(() => {
+      const fixture = createComponent(NestedDropZones);
+      fixture.detectChanges();
+      const {dragItems, innerList, outerList} = fixture.componentInstance;
+      const innerClasses = innerList.nativeElement.classList;
+      const outerClasses = outerList.nativeElement.classList;
+      const draggingClass = 'cdk-drop-list-dragging';
+
+      expect(innerClasses).not.toContain(draggingClass,
+          'Expected inner list to start off as not dragging.');
+      expect(outerClasses).not.toContain(draggingClass,
+          'Expected outer list to start off as not dragging.');
+
+      startDraggingViaMouse(fixture, dragItems.first.element.nativeElement);
+      fixture.detectChanges();
+
+      expect(innerClasses).toContain(draggingClass,
+          'Expected inner list to be dragging.');
+      expect(outerClasses).not.toContain(draggingClass,
+          'Expected outer list to not be dragging.');
+    }));
+
   });
 
   describe('in a connected drop container', () => {
@@ -4561,6 +4612,32 @@ class DraggableInScrollableVerticalDropZone extends DraggableInDropZone {
   }
 }
 
+@Component({
+  // Note that we need the blank `ngSwitch` below to hit the code path that we're testing.
+  template: `
+    <div
+      cdkDropList
+      class="drop-list"
+      style="width: 100px; background: pink;"
+      [id]="dropZoneId"
+      [cdkDropListData]="items"
+      (cdkDropListSorted)="sortedSpy($event)"
+      (cdkDropListDropped)="droppedSpy($event)">
+        <ng-container [ngSwitch]="true">
+          <div
+            *ngFor="let item of items"
+            cdkDrag
+            [cdkDragData]="item"
+            [cdkDragBoundary]="boundarySelector"
+            [style.height.px]="item.height"
+            [style.margin-bottom.px]="item.margin"
+            style="width: 100%; background: red;">{{item.value}}</div>
+        </ng-container>
+    </div>
+  `
+})
+class DraggableInDropZoneWithContainer extends DraggableInDropZone {}
+
 // Use inline blocks here to avoid flexbox issues and not to have to flip floats in rtl.
 const HORIZONTAL_FIXTURE_STYLES = `
   .cdk-drop-list {
@@ -5095,16 +5172,14 @@ class WrappedDropContainerComponent {
       class="container"
       (cdkDragStarted)="containerDragStartedSpy($event)"
       (cdkDragMoved)="containerDragMovedSpy($event)"
-      (cdkDragReleased)="containerDragReleasedSpy($event)"
-    >
+      (cdkDragReleased)="containerDragReleasedSpy($event)">
       <div
         cdkDrag
         class="item"
         #item
         (cdkDragStarted)="itemDragStartedSpy($event)"
         (cdkDragMoved)="itemDragMovedSpy($event)"
-        (cdkDragReleased)="itemDragReleasedSpy($event)"
-      >
+        (cdkDragReleased)="itemDragReleasedSpy($event)">
       </div>
     </div>`
 })
@@ -5120,6 +5195,31 @@ class NestedDragsComponent {
   itemDragReleasedSpy = jasmine.createSpy('item drag released spy');
 }
 
+@Component({
+  styles: [`
+    .drop-list {
+      width: 100px;
+      background: pink;
+    }
+  `],
+  template: `
+    <div cdkDropList class="drop-list" #outerList>
+      <div cdkDropList class="drop-list" #innerList>
+        <div
+          *ngFor="let item of items"
+          cdkDrag
+          style="width: 100%; background: red; height: ${ITEM_HEIGHT}px;">{{item}}</div>
+      </div>
+    </div>
+  `
+})
+class NestedDropZones {
+  @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
+  @ViewChild('outerList', {static: false}) outerList: ElementRef<HTMLElement>;
+  @ViewChild('innerList', {static: false}) innerList: ElementRef<HTMLElement>;
+  items = ['Zero', 'One', 'Two', 'Three'];
+}
+
 /**
  * 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/drop-list.ts

@@ -69,11 +69,7 @@ export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
   _dropListRef: DropListRef<CdkDropList<T>>;
 
   /** Draggable items in the container. */
-  @ContentChildren(CdkDrag, {
-    // Explicitly set to false since some of the logic below makes assumptions about it.
-    // The `.withItems` call below should be updated if we ever need to switch this to `true`.
-    descendants: false
-  }) _draggables: QueryList<CdkDrag>;
+  @ContentChildren(CdkDrag, {descendants: true}) _draggables: QueryList<CdkDrag>;
 
   /**
    * Other draggable containers that this container is connected to and into which the
@@ -172,7 +168,13 @@ export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
     this._draggables.changes
       .pipe(startWith(this._draggables), takeUntil(this._destroyed))
       .subscribe((items: QueryList<CdkDrag>) => {
-        this._dropListRef.withItems(items.map(drag => drag._dragRef));
+        this._dropListRef.withItems(items.reduce((filteredItems, drag) => {
+          if (drag.dropContainer === this) {
+            filteredItems.push(drag._dragRef);
+          }
+
+          return filteredItems;
+        }, [] as DragRef[]));
       });
   }