cdkDropList events not triggered within a mat-table row
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### What is the expected behavior?
When the table row is set to cdkDropList it should treat cdkDrag items within the row as list items, reordering where necessary and triggering cdkDropListDropped on release
#### What is the current behavior?
mat-header-cells with the cdkDrag property inside a cdkDropList mat-header-row are behaving as if they are normal cdkDrag items without a cdkDropList.
#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-3x3fbt
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
9.1.3
#### Is there anything else we should know?
Similar issue: https://github.com/angular/components/issues/13770
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and inspect how cdkDropList and cdkDrag interact inside a mat-table header row. Compare the behavior with the similar issue #13770 and verify whether the row treats its mat-header-cell drags as list items. Done means reordering works and cdkDropListDropped fires on release.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100