bug(Material Drag and Drop): Issue with connected lists

Reproduction

https://stackblitz.com/edit/angular-9-material-drag-drop?file=src%%2Fapp%%2Fapp.component.html

Steps to reproduce:

  1. Add the cdkDrag item inside another tag whose parent is not the cdkList.
  2. Grab an element in the above list.
  3. Drag it to the second connected list

Expected Behavior

In angular material V8 it works correctly, doesn’t matter if the cdkDrag item’s direct parent is not the cdkList. Version 9 should behave the same way.

Actual Behavior

Error in /turbo_modules/@angular/cdk@9.2.3/bundles/cdk-drag-drop.umd.js (1676:29)
Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

Environment

  • Angular: 9.1.4
  • Angular Material: 9.2.2
  • OS: MacOS Catalina
  • Browsers: Chrome

1 possible answer(s) on “bug(Material Drag and Drop): Issue with connected lists