angular / angular/components

bug(cdkDrag): Items in DropLIst Jump Down When Using DragBoundary or ConstrainPosition with Custom Preview

Open
#30,439 1 comment 1 reaction 0 assignees View on GitHub
area: cdk/drag-drop P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Items with a custom preview inside of a drop list that should be constrained either by constrainPosition or a dragBoundary appear to jump down for one frame when being dragged before constraint is applied.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-eyxb1gn5?file=src%2Fmain.ts

### Expected Behavior

Constraints are applied to drag preview on starting frame of drag.

### Actual Behavior

Constraints are not applied to drag preview until the second frame of the dragging.

### Environment

- Angular: 19.0.6
- CDK/Material: 19.1.2
- Browser(s): Chrome/Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and its src/main.ts entry point, then reproduce the drag behavior with a custom preview and either dragBoundary or constrainPosition in Chrome or Firefox. Done means the drag preview has its constraint applied on the starting frame, without a one-frame downward jump.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.