Skip to content

Commit 4815325

Browse files
committed
fix(cdk/drag-drop): stop pointer events on placeholder
Removes the pointer events from the drag placeholder so that the user can't interact with it while the preview is animating. Fixes #24403.
1 parent 599d1b4 commit 4815325

File tree

2 files changed

+6
-0
lines changed

2 files changed

+6
-0
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2952,6 +2952,9 @@ describe('CdkDrag', () => {
29522952
expect(placeholder.textContent!.trim())
29532953
.withContext('Expected placeholder content to match element')
29542954
.toContain('One');
2955+
expect(placeholder.style.pointerEvents)
2956+
.withContext('Expected pointer events to be disabled on placeholder')
2957+
.toBe('none');
29552958

29562959
dispatchMouseEvent(document, 'mouseup');
29572960
fixture.detectChanges();

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1159,6 +1159,9 @@ export class DragRef<T = any> {
11591159
placeholder = deepCloneNode(this._rootElement);
11601160
}
11611161

1162+
// Stop pointer events on the preview so the user can't
1163+
// interact with it while the preview is animating.
1164+
placeholder.style.pointerEvents = 'none';
11621165
placeholder.classList.add('cdk-drag-placeholder');
11631166
return placeholder;
11641167
}

0 commit comments

Comments
 (0)