bug(drag-drop): cdkDropListEntered and cdkDropListExited events do not fire after scrolling when dropList is not a child of cdkScrollable container
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dalla riproduzione collegata su StackBlitz e confronta il comportamento del trascinamento e rilascio prima e dopo lo scorrimento, quando gli elenchi di drop e il contenitore cdkScrollable sono componenti separati. Esamina la discussione correlata #19274 e il workaround tentato con ScrollDispatcher.register. Il lavoro è completato quando cdkDropListEntered e cdkDropListExited continuano a riflettere la posizione del cursore dopo lo scorrimento di uno dei due pannelli.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100