bug(drag-drop): cdkDropListEntered and cdkDropListExited events do not fire after scrolling when dropList is not a child of cdkScrollable container
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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](https://github.com/angular/components/issues/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
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and compare drag-and-drop behavior before and after scrolling when the drop lists and cdkScrollable container are separate components. Review the related #19274 discussion and the attempted ScrollDispatcher.register workaround. Done means cdkDropListEntered and cdkDropListExited continue to reflect cursor position after either panel is scrolled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100