bug(DragDrop): cdkDropListDropped fires from source rather than destination

[lukejack]

Reproduction

Stackblitz link:
https://stackblitz.com/edit/angular-ivy-mvaic6

Steps to reproduce:

1. Create 2 separate cdkDropLists
2. Put a cdkDrag element in one of the lists
3. Connect the lists using cdkDropListConnectedTo
4. On both lists, attach a console.log to cdkDropListDropped, with different logged text for each container
5. Drag the cdkDrag element from its origin cdkDropList to the other cdkDropList

Expected Behavior

The destination cdkDropList runs the console.log

Actual Behavior

The source cdkDropList runs the console.log

Environment

• Angular: 10.0.1
• CDK: 10.0.0, 9.2.4, and 8.2.3
• Browser(s): Chrome and Edge

[crisbeto]

It's because the lists aren't actually connected, because there's no list with an id of abc. When you drop it over the second list it's being treated as if you dropped it somewhere outside the list. We should have a warning that is logged when the passed in id doesn't point to a list.

[lukejack]

Thanks for the quick reply, that has solved my issue.

[crisbeto]

Let's keep the issue open for now, I'll add a warning so it's easier to catch problems like this in the future.