bug(drag-drop): Item not always restored to initial index when using cdkDropListSortingDisabled on connected lists

[JohnKis]

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

Dragging an item from its original drop list to another one then dragging it back to the original drop list isn't always restored to its initial index.

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-1ra8a1?file=src/app/cdk-drag-drop-disabled-sorting-example.html

Steps to reproduce:

1. Drag any item item from the top container to the bottom one (without dropping) and drag it back to the top container
2. Observer that the item gets re-added at its original index in the top container
3. Drag any item but the first from the bottom container to the top one (without dropping) and drag it back to the bottom container

Expected Behavior

Item re-added to the bottom container at its original index.

Actual Behavior

Item re-added to the bottom container at an index lower than its original.

Environment

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

[Doener48]

+1 same issue

[maciej-pawlisz]

I have the same issue with 17.1.3. I tracked down the bug to _syncItemsWithRef method in drag-drop.mjs which is called during beforeStarted event. This method sorts items on the drag list using getSortedItems. Items are sorted using comparing document position of their visual elements. This method is called when visual element of currently dragged item is still in the other list, so the list is sorted incorrectly when other list is before current list in DOM.

This bug is more annoying when you try to implement #13906 using this solution: https://stackblitz.com/edit/angular-krmecd, because it breaks the "copy" behaviour.

[PsychoSpike]

The OP stackblitz is not working for me, but going by the description i have encountered the same issue. I have posted this issue about it: [issue 28919](https://github.com/angular/components/issues/28919)

Note that in my example there are 3 lists, and that this issue is only happening if you drag it over a list that is before the original list and you can restore the index if you drag it over a list that is behind the original list.

My tiny brain combined with my lack of knowledge of angular and coding in general prevent me from finding a solution, despite having tried desperately :)