Skip to content

Commit 60b4a58

Browse files
crisbetoandrewseguin
authored andcommitted
fix(drag-drop): enterPredicate being called with wrong drop container (#13578)
Fixes the `enterPredicate` being called with the item's current container, rather than the one it is being moved into. Also tweaks the function signature to avoid unnecessary null checks and expands the description.
1 parent 6afe3f5 commit 60b4a58

File tree

2 files changed

+27
-4
lines changed

2 files changed

+27
-4
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1437,6 +1437,28 @@ describe('CdkDrag', () => {
14371437
});
14381438
}));
14391439

1440+
it('should call the `enterPredicate` with the item and the container it is entering',
1441+
fakeAsync(() => {
1442+
const fixture = createComponent(ConnectedDropZones);
1443+
fixture.detectChanges();
1444+
1445+
const dropInstances = fixture.componentInstance.dropInstances.toArray();
1446+
const spy = jasmine.createSpy('enterPredicate spy').and.returnValue(true);
1447+
const groups = fixture.componentInstance.groupedDragItems.slice();
1448+
const dragItem = groups[0][1];
1449+
const targetRect = groups[1][2].element.nativeElement.getBoundingClientRect();
1450+
1451+
dropInstances[1].enterPredicate = spy;
1452+
fixture.detectChanges();
1453+
1454+
dragElementViaMouse(fixture, dragItem.element.nativeElement,
1455+
targetRect.left + 1, targetRect.top + 1);
1456+
flush();
1457+
fixture.detectChanges();
1458+
1459+
expect(spy).toHaveBeenCalledWith(dragItem, dropInstances[1]);
1460+
}));
1461+
14401462
it('should be able to start dragging after an item has been transferred', fakeAsync(() => {
14411463
const fixture = createComponent(ConnectedDropZones);
14421464
fixture.detectChanges();

src/cdk/drag-drop/drop.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,12 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
7777
@Input('cdkDropLockAxis') lockAxis: 'x' | 'y';
7878

7979
/**
80-
* Function that is used to determine whether an item
81-
* is allowed to be moved into a drop container.
80+
* Function that is used to determine whether an item is allowed to be moved
81+
* into a drop container. The function will be called with the item that is
82+
* being dragged and the container that it's being moved into.
8283
*/
8384
@Input('cdkDropEnterPredicate')
84-
enterPredicate: (drag?: CdkDrag, drop?: CdkDrop) => boolean = () => true
85+
enterPredicate: (drag: CdkDrag, drop: CdkDrop) => boolean = () => true
8586

8687
/** Emits when the user drops an item inside the container. */
8788
@Output('cdkDropDropped')
@@ -315,7 +316,7 @@ export class CdkDrop<T = any> implements OnInit, OnDestroy {
315316
const result = this._positionCache.siblings
316317
.find(sibling => isInsideClientRect(sibling.clientRect, x, y));
317318

318-
return result && result.drop.enterPredicate(item, this) ? result.drop : null;
319+
return result && result.drop.enterPredicate(item, result.drop) ? result.drop : null;
319320
}
320321

321322
/**

0 commit comments

Comments
 (0)