From fa944b7fe40a336fe9ae6003658e61fedc0b1971 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 7 Nov 2018 18:11:18 +0000 Subject: [PATCH] fix(drag-drop): ignore enter predicate when returning item to its initial container (#13972) Something I noticed while putting together an example for the `enterPredicate` a while ago. Currently we allow an item to be returned to its initial container, even if the initial container isn't connected to the new one, however we don't do the same for the `enterPredicate`. This means that the user can get into the situation where they drag an item out, but then they're not allowed to return it, which seems weird. These changes will ignore the `enterPredicate`, if an item is being returned to the initial container. --- src/cdk/drag-drop/drag.spec.ts | 40 ++++++++++++++++++++++++ src/cdk/drag-drop/drag.ts | 2 +- src/cdk/drag-drop/drop-list-container.ts | 2 +- src/cdk/drag-drop/drop-list.ts | 5 ++- 4 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/cdk/drag-drop/drag.spec.ts b/src/cdk/drag-drop/drag.spec.ts index 59c12654ace..b92cf03558d 100644 --- a/src/cdk/drag-drop/drag.spec.ts +++ b/src/cdk/drag-drop/drag.spec.ts @@ -1609,6 +1609,46 @@ describe('CdkDrag', () => { expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); })); + it('should be able to move the element over a new container and return it to the initial ' + + 'one, even if it no longer matches the enterPredicate', fakeAsync(() => { + const fixture = createComponent(ConnectedDropZones); + fixture.detectChanges(); + + const groups = fixture.componentInstance.groupedDragItems; + const dropZones = fixture.componentInstance.dropInstances.map(d => d.element.nativeElement); + const item = groups[0][1]; + const initialRect = item.element.nativeElement.getBoundingClientRect(); + const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect(); + + fixture.componentInstance.dropInstances.first.enterPredicate = () => false; + fixture.detectChanges(); + + startDraggingViaMouse(fixture, item.element.nativeElement); + + const placeholder = dropZones[0].querySelector('.cdk-drag-placeholder')!; + + expect(placeholder).toBeTruthy(); + expect(dropZones[0].contains(placeholder)) + .toBe(true, 'Expected placeholder to be inside the first container.'); + + dispatchMouseEvent(document, 'mousemove', targetRect.left + 1, targetRect.top + 1); + fixture.detectChanges(); + + expect(dropZones[1].contains(placeholder)) + .toBe(true, 'Expected placeholder to be inside second container.'); + + dispatchMouseEvent(document, 'mousemove', initialRect.left + 1, initialRect.top + 1); + fixture.detectChanges(); + + expect(dropZones[0].contains(placeholder)) + .toBe(true, 'Expected placeholder to be back inside first container.'); + + dispatchMouseEvent(document, 'mouseup'); + fixture.detectChanges(); + + expect(fixture.componentInstance.droppedSpy).not.toHaveBeenCalled(); + })); + it('should transfer the DOM element from one drop zone to another', fakeAsync(() => { const fixture = createComponent(ConnectedDropZones); fixture.detectChanges(); diff --git a/src/cdk/drag-drop/drag.ts b/src/cdk/drag-drop/drag.ts index 7085a60d9b6..e99744d3d91 100644 --- a/src/cdk/drag-drop/drag.ts +++ b/src/cdk/drag-drop/drag.ts @@ -521,7 +521,7 @@ export class CdkDrag implements AfterViewInit, OnDestroy { // This handles the case where two containers are connected one way and the user tries to // undo dragging an item into a new container. if (!newContainer && this.dropContainer !== this._initialContainer && - this._initialContainer._canReturnItem(this, x, y)) { + this._initialContainer._canReturnItem(x, y)) { newContainer = this._initialContainer; } diff --git a/src/cdk/drag-drop/drop-list-container.ts b/src/cdk/drag-drop/drop-list-container.ts index b270ac64711..5fd02d41408 100644 --- a/src/cdk/drag-drop/drop-list-container.ts +++ b/src/cdk/drag-drop/drop-list-container.ts @@ -60,7 +60,7 @@ export interface CdkDropListContainer { _draggables: QueryList; _getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number): CdkDropListContainer | null; - _canReturnItem(item: CdkDrag, x: number, y: number): boolean; + _canReturnItem(x: number, y: number): boolean; } /** diff --git a/src/cdk/drag-drop/drop-list.ts b/src/cdk/drag-drop/drop-list.ts index f0ed6365baf..7e4add8e0f3 100644 --- a/src/cdk/drag-drop/drop-list.ts +++ b/src/cdk/drag-drop/drop-list.ts @@ -356,12 +356,11 @@ export class CdkDropList implements OnInit, OnDestroy { /** * Checks whether an item that started in this container can be returned to it, * after it was moved out into another container. - * @param item Item that is being checked. * @param x Position of the item along the X axis. * @param y Position of the item along the Y axis. */ - _canReturnItem(item: CdkDrag, x: number, y: number): boolean { - return isInsideClientRect(this._positionCache.self, x, y) && this.enterPredicate(item, this); + _canReturnItem(x: number, y: number): boolean { + return isInsideClientRect(this._positionCache.self, x, y); } /** Refreshes the position cache of the items and sibling containers. */