bug(cdkDropList): Drag order misaligned and incorrect.

[thavus]

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

When using cdkDropList, dragging causes the order to become misaligned and incorrect.
I have included a link to a stackblitz which demonstrates the problem and I have uploaded a video below showcasing the same problem.

20250320-1841-32.7959590.mp4

Additional Information

• Removing the transition: transform css had no effect.
• Removing the fx-flex class has no effect.
• Removing the fx-align-start-center class has no effect.
• Removing the fx-row class reduces the severity of the problem, but does not eliminate it.
• Increasing the height of the draggable elements reduces the chance of the undesirable effect triggering, but does not eliminate it.

Suggested Fix

Use CdkDropList._cachePositions() before performing reorder operations (Like on the cdkDragStarted event). Alternatively, you could use _cachePositions() when any element's height/width changes, but that would likely be much less performant.

Reproduction

StackBlitz link:
https://stackblitz.com/edit/components-issue-starter-y53wrlvc?file=src%2Fglobal_styles.css
Steps to reproduce:

1. Click and drag the handle for one of the books in the series.
2. Drag the element up and down until the issue is produced.
3. While dragging, the elements overlay on top of one another and become misaligned. The order also becomes incorrect.

Expected Behavior

The order should not be misaligned and incorrect.

Actual Behavior

While dragging, the elements overlay on top of one another and become misaligned. The order also becomes incorrect.

Environment

• Angular: ^18.2.13.
• CDK/Material: ^18.2.14. However, can be produced on any version.
• Browser(s): Chrome Version 134.0.6998.89 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

This is a problem with your setup. It's because you have cdkDrag on the inner mat-icon-button with the trash can. If you remove it, it works as expected: https://stackblitz.com/edit/components-issue-starter-kuygsjs7?file=src%2Fmain.ts

[thavus]

@crisbeto Thank you, I don't know why I didn't notice that.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}