components: 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

error

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;

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 28 (4 by maintainers)

Commits related to this issue

fix(drag-drop): error if drag sequence is started while another one is finishing Fixes an error being thrown if the user manages to start a different drag sequence while the previous one is finishing... — committed to crisbeto/material2 by crisbeto 5 years ago
fix(drag-drop): error if drag sequence is started while another one is finishing Fixes an error being thrown if the user manages to start a different drag sequence while the previous one is finishing... — committed to crisbeto/material2 by crisbeto 5 years ago

Most upvoted comments

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

+12

crisbeto on Sep 16, 2018

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

birjitningomba on Nov 17, 2018

for me the problem is not solved. here is a small test project. problem is in the first table in home.component

millerlight on Dec 12, 2018

Any fix?

xdevnull on Mar 18, 2019

Hello. Same problem with “@angular/cdk”: “^7.1.1”. I have a component with two connected cdkDropList. One list is filled with dynamically generated components that contain the cdkDrag directive in the template. When I try to drag one of these elements the error appears.

edit: solved following @JesseZomer hint:

edit: the issues seems to resolve when I put the cdkDrag directives on the child-component selectors in the same html as the component instead of inside the html of the child component.

cantastage on Dec 12, 2018

I’m having the same problem using "@angular/cdk": "^7.1.1". Why was this issue closed?

I’m getting this while having the cdkDropList and cdkDrag directives spread over multiple components and child components. While having a parent with the cdkDropListGroup directive.

edit: the issues seems to resolve when I put the cdkDrag directives on the child-component selectors in the same html as the component instead of inside the html of the child component.

JesseZomer on Dec 11, 2018

@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.

crisbeto on Oct 12, 2018

@crisbeto

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

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

kanidjar on Sep 15, 2018