Skip to content

Drag-Drop doesn't work inside cdkDropListGroup if ShadowDom is enabled & *ngFor is used #17422

@dusk196

Description

@dusk196

Reproduction

https://stackblitz.com/edit/angular-uh31tp?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce:

Initially, it works fine with ViewEncapsulation.None

  1. Change the encapsulation to ShadowDom
    Observation: Doesn't work

  2. Now go to app.component.html and comment out the *ngFor section & uncomment the individual hard-coded section.
    Observation: Works as expected

Expected Behavior

Drag-Drop should work inside cdkDropListGroup if ShadowDom is enabled & *ngFor is used

Actual Behavior

Drag-Drop doesn't work inside cdkDropListGroup if ShadowDom is enabled & *ngFor is used. But if we disable ShadowDom, it works fine

Environment


Angular CLI: 8.3.9
Node: 10.16.0
OS: win32 x64
Angular: 8.2.10

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaround

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions