diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index c3c0f462162..a37613983cb 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -26,6 +26,7 @@ import {CdkDragDrop} from './drag-events'; import {moveItemInArray} from './drag-utils'; import {CdkDropList} from './drop-list'; import {CdkDragHandle} from './drag-handle'; +import {CdkDropListGroup} from './drop-list-group'; const ITEM_HEIGHT = 25; const ITEM_WIDTH = 75; @@ -2218,6 +2219,14 @@ describe('CdkDrag', () => { expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); })); + it('should not add child drop lists to the same group as their parents', fakeAsync(() => { + const fixture = createComponent(NestedDropListGroups); + const component = fixture.componentInstance; + fixture.detectChanges(); + + expect(Array.from(component.group._items)).toEqual([component.listOne, component.listTwo]); + })); + }); }); @@ -2603,6 +2612,25 @@ class ConnectedDropZonesWithSingleItems { droppedSpy = jasmine.createSpy('dropped spy'); } +@Component({ + template: ` +
+
+
+
+
+ +
+
+ ` +}) +class NestedDropListGroups { + @ViewChild('group') group: CdkDropListGroup; + @ViewChild('listOne') listOne: CdkDropList; + @ViewChild('listTwo') listTwo: CdkDropList; +} + + /** * Component that passes through whatever content is projected into it. * Used to test having drag elements being projected into a component. diff --git a/src/cdk/drag-drop/drop-list-group.ts b/src/cdk/drag-drop/drop-list-group.ts index b6a97bbf265..e7bea56f2b0 100644 --- a/src/cdk/drag-drop/drop-list-group.ts +++ b/src/cdk/drag-drop/drop-list-group.ts @@ -15,7 +15,8 @@ import {Directive, OnDestroy} from '@angular/core'; * from `cdkDropList`. */ @Directive({ - selector: '[cdkDropListGroup]' + selector: '[cdkDropListGroup]', + exportAs: 'cdkDropListGroup', }) export class CdkDropListGroup implements OnDestroy { /** Drop lists registered inside the group. */ diff --git a/src/cdk/drag-drop/drop-list.ts b/src/cdk/drag-drop/drop-list.ts index 6afbc983b58..00ab3c667af 100644 --- a/src/cdk/drag-drop/drop-list.ts +++ b/src/cdk/drag-drop/drop-list.ts @@ -20,6 +20,7 @@ import { Optional, Directive, ChangeDetectorRef, + SkipSelf, } from '@angular/core'; import {Directionality} from '@angular/cdk/bidi'; import {CdkDrag} from './drag'; @@ -81,6 +82,8 @@ interface ListPositionCacheEntry { selector: '[cdkDropList], cdk-drop-list', exportAs: 'cdkDropList', providers: [ + // Prevent child drop lists from picking up the same group as their parent. + {provide: CdkDropListGroup, useValue: undefined}, {provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList}, ], host: { @@ -157,7 +160,7 @@ export class CdkDropList implements OnInit, OnDestroy { private _dragDropRegistry: DragDropRegistry>, private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir?: Directionality, - @Optional() private _group?: CdkDropListGroup) {} + @Optional() @SkipSelf() private _group?: CdkDropListGroup) {} ngOnInit() { this._dragDropRegistry.registerDropContainer(this);