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

kanidjar commented 6 years ago

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;

kanidjar commented 6 years ago

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

crisbeto commented 6 years ago

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 commented 6 years ago

@crisbeto

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

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

crisbeto commented 6 years ago

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

kanidjar commented 6 years ago

Nice, thank you @crisbeto

dakotamaker commented 5 years ago

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

crisbeto commented 5 years ago

@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 commented 5 years ago

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

antonpegov commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

The drag & drop is a great feature, In my opinion it should be not only with simple list that we can drag and drop but also components and more specific to dynamic components. I am sure the usage of dynamic components may be limited scope but this is where Angular is helping new developers like us achive a lot of things quickly and easily. I do not understand the priority of the bugs but to me this bug should be raised to a higher priority. @crisbeto please comment.

millerlight commented 5 years ago

same problems here with mat-table as cdkDropList and mat-row inside as cdkDrag

this means that the new drag&drop api in angular7.1 is not usable with mat-tables which is sad, because i need this features...

millerlight commented 5 years ago

btw. only dragging of mat-tables works fine....

JesseZomer commented 5 years ago

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.

cantastage commented 5 years ago

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.

millerlight commented 5 years ago

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

davidecavestro commented 5 years ago

I reproduce it adding D&D to move reactive form controls (siblings dynamically added to a single form within a single angular component). @JesseZomer or @cantastage could you please elaborate on the workaround you've found?

jheyl commented 5 years ago

Hey, I stumbled upon this thread because I have the exact same the Problem when I use the cdkDrag Directive on a span inside a ngb-panel.

Using the exact same code inside a <ul>-element without the ngb-container works without any problems.

amumm commented 5 years ago

I am experiencing the same issued. I need to be able to call the (cdkDragDropped) event within the child component, but this error makes it so the cdkDropList does not recognize the cdkDrop when in separate components.