bug(drag-drop): cdkDropListEntered and cdkDropListExited events do not fire after scrolling when dropList is not a child of cdkScrollable container
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンクされている StackBlitz の再現から始め、drop リストと cdkScrollable コンテナが別々のコンポーネントである場合に、スクロール前後のドラッグ&ドロップの動作を比較してください。関連する #19274 の議論と、試行された ScrollDispatcher.register workaround を確認してください。いずれかのパネルをスクロールした後も、cdkDropListEntered と cdkDropListExited がカーソル位置を引き続き反映すれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100