angular / angular/components

bug(DragDrop): Drag&Drop not working inside MatDialog and when the page's height is too big

Open
#22,709 1 comment 0 reactions 0 assignees View on GitHub
area: cdk/drag-drop area: cdk/overlay P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

Here is a reproduction. There is a button down there which opens a dialog with draggable items.

https://stackblitz.com/edit/angular-9-material-starter-lktwr2?file=src/app/app.component.css

#### Expected Behavior

Drag&Drop should work.

#### Actual Behavior

I have a project where I have a table with a lot of items, and when I scroll down (for example to the middle of the table, page height ~is 4000px), and by clicking on a row I open a dialog where I want to use drag&drop and where it doesn't work (as in the reproduction). But if I click on a row which is at the beginning of the table, drag&drop is working fine.

#### Environment

In the reproduction I used Angular 9, but I see this in Angular 11 as well. Not sure if this fixed in 12th version.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially src/app/app.component.css, and reproduce the drag-and-drop failure inside the dialog after scrolling the page. Compare behavior from the top and middle of the table; done means draggable items work in the MatDialog regardless of page height and the reproduction still behaves correctly in Angular 9 and 11.

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
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.