bug(drag-drop): cdkDropListEntered and cdkDropListExited events do not fire after scrolling when dropList is not a child of cdkScrollable container

[erick-aguilar-palomeque]

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

I am experiencing an issue with the drag-and-drop functionality in a layout where the source dropList and the scrollable container are implemented as separate components, without a parent-child relationship. Even though the scrollable container uses the cdkScrollable directive.

In my use case, the left navigation panel contains a list of drop lists, and the source page also has its own elements. I highlight left nav items when the user drags elements over them, using the cdkDropListEntered and cdkDropListExited events to after that allow dropping those.

A related issue was discussed here: #19274. In that thread, it was suggested to use ScrollDispatcher.register to manually register the scrollable parent, but I tried this workaround and it did not resolve the issue.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-yzhpyubf Steps to reproduce:

1. Drag an item from the source page over the left nav items.
2. While holding the drag, scroll the left nav panel.
3. Observe the issue: After scrolling, the left nav items no longer highlight when you drag over them.

Expected Behavior

• When dragging an item over the left nav, the corresponding item should highlight, regardless of whether the user has scrolled the left nav.
• The cdkDropListEntered and cdkDropListExited events should fire correctly according to the cursor position, even after scrolling, and even when the dropList and scrollable container are not in a parent-child relationship.

Actual Behavior

• When dragging over the left nav items without scrolling, the highlight works as expected and the events fire.
• After scrolling the left nav or the source page, the events stop firing, and the highlight does not update.
• This occurs even though the scrollable container use the cdkScrollable directive when the containers are implemented as separate components (not parent-child).

Environment

• Angular:
• CDK/Material: 20.2.13
• Browser(s): Chrome 141.0.7390.13
• Operating System: Chrome OS

[crisbeto]

I suspect that the issue here is that we only account for this case only when the list itself is scrollable.