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

[kanidjar]

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;

[kanidjar]

FYI: the error occurs when adding the 2nd "List" item.

[crisbeto]

It's hard to tell what's going on based on the video. Based on the stack trace, it looks like a CdkDrag somehow ended up in the wrong container, but I can't think of any obvious place where it could happen. @kanidjar would you be able to put together a simplified example that breaks?

[kanidjar]

@crisbeto

here it is : https://stackblitz.com/edit/angular-uhe5x7

Try to drop a same item twice in the red zone.

[crisbeto]

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

[kanidjar]

Nice, thank you @crisbeto

[dakotamaker]

@crisbeto what was the fix exactly? I'm still seeing this issue and I am on the newest version of the cdk

[crisbeto]

@dakotamaker it's been a while so I don't remember. I think I tried out the Stackblitz against master and the issue just wasn't there.

[jurStv]

I'm facing same issue. Did you find any way to resolve this one @kanidjar?

[antonpegov]

I'm getting this error when applying [cdkDropList] directive it the parent component and [cdkDragData] in it's childrens. When everything in the one component, then no errors.

[birjitningomba]

I'm getting this error when applying [cdkDropList] directive it the parent component and [cdkDragData] in it's childrens. When everything in the one component, then no errors.

Yes, I am facing the same, is there a solution for this?

[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>