bug(drag-drop): cdkDropListEntered and cdkDropListExited events do not fire after scrolling when dropList is not a child of cdkScrollable container
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par la reproduction StackBlitz liée et comparez le comportement du glisser-déposer avant et après le défilement lorsque les listes de drop et le conteneur cdkScrollable sont des composants distincts. Examinez la discussion associée #19274 ainsi que le workaround tenté avec ScrollDispatcher.register. Le travail est considéré comme terminé lorsque cdkDropListEntered et cdkDropListExited continuent de refléter la position du curseur après le défilement de l’un ou l’autre panneau.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100