bug(drag-drop): inconsistent DOM position for drag placeholder

[chintankavathia]

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

drag placeholder element is inserted at wrong dom location when there is a wrapper element with full height around drag items.

Reproduction

StackBlitz link: https://stackblitz.com/edit/hmmxrz?file=src%2Fexample%2Fcdk-drag-drop-connected-sorting-example.html,src%2Fexample%2Fcdk-drag-drop-connected-sorting-example.css,src%2Fexample%2Fcdk-drag-drop-connected-sorting-example.ts,src%2Findex.html
Steps to reproduce:

1. In above stackblitz example try to drag item from To Do list to Done list but make sure you move the drag item into Done container from bottom.
2. notice that drag placeholder element will be inserted next to the wrapper div
3. normally drag placeholder element should be inserted next to the cdkdrag item

Expected Behavior

drag placeholder element should be inserted next to the cdkdrag item

Actual Behavior

drag placeholder element is inserted next to the wrapper div if item is not dragged over other drag item but into the empty area of wrapper div.

Environment

• Angular: 17
• CDK/Material: 17
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

Closing the issue since this setup isn't supported. The cdkDrag items should be direct descendants of the cdkDropList. The problem is that otherwise we wouldn't know where to insert the DOM node. Technically we could find the parent of one of the items in the new list, but this will break down if the list is empty.

[chintankavathia]

Closing the issue since this setup isn't supported. The cdkDrag items should be direct descendants of the cdkDropList. The problem is that otherwise we wouldn't know where to insert the DOM node. Technically we could find the parent of one of the items in the new list, but this will break down if the list is empty.

But you can always use the fallback if the list is empty then, No? Or can allow an optional input user can specify their own element ref similar like cdkDragRootElement

[crisbeto]

The problem is if you have something like this:

<div cdkDropList>
  <div class="inner-container"></div>
</div>

It's unclear whether the item should go into the outer or inner container. We can add the input that you mentioned, but that would add more complexity (e.g. we'd have to also respond to scroll events on it) which doesn't seem like it's worth it.

[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.}