bug:(@angular/cdk/drag-drop): Cannot read property 'clientRect' of undefined

Bug, feature request, or proposal:

BUG: when drag-dropping an item between two connected dropzone, an error occurs randomly

See video and image below

https://streamable.com/nuudt

What is the expected behavior?

No error should occur.

What is the current behavior?

An error occurs randomly as soon as an item enters in the dropzone. The (dropped) event happens anyway.

What are the steps to reproduce?

Classic connected dropzones.

My dropzones are not in the same component.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

“@angular/cdk”: “^7.0.0-beta.0” “@angular/material”: “^6.4.7” “@angular/core”: “^6.1.6”,

Is there anything else we should know?

The error is located in drag-drop.es5.js.CdkDrop._sortItem (drag-drop.es5.js:1436)

var currentPosition = siblings[currentIndex].clientRect;

[crisbeto]

Thanks for the reproduction @kanidjar. It looks like the issue was fixed in master already.

[birjitningomba]

@crisbeto I am trying to sort or dragdrop dynamically generated components. The container has the cdkDropList directive while the dynamically components has the cdkDrag directive and I would expect it works, It is simply not working.

[Parent Component that holds a container for the dynamic child component to insert.]

<div (cdkDropListDropped)="drop($event)" class="example-list"  cdkDropList>
    <ng-template   #container  ></ng-template>
</div>

[HTML of the child component that would be inserted in the container.]

<mat-card class="sample-chips" cdkDrag>
	<mat-card-title>{{chipData.chipName}} </mat-card-title>
	<mat-card-content> <b>{{chipData.chipFlavour}}</b> </mat-card-content>
</mat-card>