Components: Drag and Drop cdkDropListConnectedTo doesn't work with ViewEncapsulation.ShadowDom and ng-template

[drstonebraker]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-ts3orp

Steps to reproduce:

1. try dragging from one list to the other

Note that if you either
a) remove encapsulation: ViewEncapsulation.ShadowDom or
b) remove the ng-template in the html file and just render the content directly

Then the drag and drop works as expected

Expected Behavior

What behavior were you expecting to see?
It is possible to drag a task from one list to the other, since the two lists are connected via the cdkDropListConnectedTo api

Actual Behavior

What behavior did you actually see?
It is not possible to drag from one list to the other.

Environment

• Angular: Stackblitz forked from the documentation example here: https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists
• CDK/Material: see above
• Browser(s): Chrome Version 79.0.3945.130
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS Mojave

[crisbeto]

This should be fixed as of 9.0.0-next.1 by https://github.com/angular/components/pull/17424.

[drstonebraker]

I have #17424 (to be specific, I'm using version 9f2c93725e973e2c76e3308a72c5bd14f5ec483c), but am still experiencing an issue with cdkDropListConnectedTo not working

[crisbeto]

That's odd, because I copied your example into our dev app that's running against master and it worked fine. If it's still broken it might be worth double-checking the version you have installed or there could be something different that's causing the issue.

[drstonebraker]

I have a stackblitz here with angular 9.0.0-rc.1 that exhibits the same incorrect behavior described in the original issue:
https://stackblitz.com/edit/angular-9-0-0-rc-1-rkphjc

[crisbeto]

That Stackblitz is on Angular 9.0.0-rc.1, but the CDK is still at 8.2.3. The issue should be fixed as of the 9.0.0-next.1 version of the CDK.

[drstonebraker]

Sorry, my mistake on that. I see that it's working with 9.0.0-next.1 version of the CDK in stackblitz. I must be experiencing a different issue in my own app. Realizing that, I tried switching cdkDropListConnectedTo to using ids instead of the template ref variable, and that actually works. The template ref variable doesn't. I'm not sure how to reproduce this problem in a stackblitz though, unfortunately.

[crisbeto]

It sounds like it's a different issue, because the Shadow DOM problem would be the same no matter whether you used IDs, direct references or a cdkDropListGroup to connect the lists.

[drstonebraker]

Should this be reopened, then, since it remains an issue?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}