angular / angular/components

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

Đang mở
#32,376 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/drag-drop P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết và so sánh hành vi kéo và thả trước và sau khi cuộn khi các danh sách drop và bộ chứa cdkScrollable là các component riêng biệt. Xem lại cuộc thảo luận liên quan #19274 và workaround ScrollDispatcher.register đã thử. Được xem là hoàn tất khi cdkDropListEntered và cdkDropListExited tiếp tục phản ánh vị trí con trỏ sau khi một trong hai panel được cuộn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.