bug(drag-drop): Failed to execute insertBefore on Node
- 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
When drag and drop is used and data refreshes in background this error can be thrown
```
ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
```
### Reproduction
StackBlitz link: https://stackblitz.com/edit/a9tq3w?file=src%2Fexample%2Fcdk-drag-drop-connected-sorting-example.html
Steps to reproduce:
1. Keep moving first element to the bottom (fast)
### Expected Behavior
Drag and drop should not cause `DOMException`
### Actual Behavior
https://github.com/angular/components/assets/21180501/9e1cee2a-d9e4-4460-a049-74821a66c827
https://github.com/angular/components/assets/21180501/ecaed375-0a32-404b-bbc2-860b58d1fe6d
```
ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at EmulatedEncapsulationDomRenderer2.insertBefore (/vendor.js:84094:20)
at BaseAnimationRenderer.insertBefore (/vendor.js:17733:19)
at nativeInsertBefore (/vendor.js:50345:12)
at applyToElementOrContainer (/vendor.js:49879:7)
at applyNodes (/vendor.js:50571:9)
at applyView (/vendor.js:50578:3)
at addViewToDOM (/vendor.js:49947:3)
at addLViewToLContainer (/vendor.js:52300:7)
at LiveCollectionLContainerImpl.attach (/vendor.js:63156:5)
at LiveCollectionLContainerImpl.swap (/vendor.js:62667:12)
```
### Environment
Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: yarn 1.22.19
OS: linux x64
Angular: 18.0.1
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cdk 18.0.5
@angular/cli 18.0.2
@angular/material 18.0.5
@angular/material-experimental 18.0.5
@angular/material-moment-adapter 18.0.5
@schematics/angular 18.0.2
rxjs 7.4.0
typescript 5.4.5
zone.js 0.14.6
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 tại src/example/cdk-drag-drop-connected-sorting-example.html và tái hiện lỗi bằng cách liên tục di chuyển phần tử đầu tiên xuống cuối trong khi dữ liệu được làm mới. Theo dõi quá trình cập nhật kéo-thả qua các stack frame insertBefore và LiveCollection được báo cáo; hoàn tất khi bản tái hiện không còn ném ra DOMException.
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
- 38/100