bug(cdkDrag): using cdkDragConstrainPosition causes erratic behavior

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

13.3.9

Description

cdkDrag works normally with box and axis constraints, but as soon as cdkDragConstrainPosition is used, the dragged element incorrectly jumps a few pixels down the y-axis.

Reproduction

Please refer to the reproduction:

https://angular-ivy-iry1fk.stackblitz.io

https://stackblitz.com/edit/angular-ivy-iry1fk?file=package.json

Expected Behavior

The dragged element should only move horizontally and not jump down the y-axis.

Actual Behavior

The element jumps a few pixels down.

Environment

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

[crisbeto]

You’d have to offset it based on the position at which the user picked up the element, which I now realize isn’t possible to read. I’ve opened up #25341 to expose it within the constrainPosition callback.

[HuntosShuntos]

This bug also seems to impact other parts of cdkDrag. Specifically when cdkDragConstrainPosition when used with cdkDragBoundary also seems to have erratic behavior.

Reproduction See below https://angular-ivy-9unppr.stackblitz.io https://stackblitz.com/edit/angular-ivy-9unppr?file=src/app/app.component.html

Environment

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

Expected Behavior Should stay within the drag boundary and be able to go to the edges of the boundary

Actual Behavior Seems that the drag boundary arbitrarily moves