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

kanidjar · 2018-09-11T13:19:22Z

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 · 2018-09-13T21:26:01Z

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

crisbeto · 2018-09-15T08:14:02Z

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 · 2018-09-15T12:49:47Z

@crisbeto

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

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

crisbeto · 2018-09-16T07:54:04Z

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

kanidjar · 2018-09-16T08:08:01Z

Nice, thank you @crisbeto

dakotamaker · 2018-10-12T13:14:09Z

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

crisbeto · 2018-10-12T13:23:07Z

@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 · 2018-10-22T18:25:34Z

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

antonpegov · 2018-11-04T09:44:04Z

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 · 2018-11-13T12:26:17Z

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 · 2018-11-17T17:45:00Z

@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 · 2018-11-20T15:06:43Z

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 · 2018-12-01T14:35:03Z

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 · 2018-12-01T14:38:26Z

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

JesseZomer · 2018-12-11T15:13:37Z

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 · 2018-12-12T09:38:54Z

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 · 2018-12-12T16:29:11Z

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

davidecavestro · 2019-01-09T08:55:38Z

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 · 2019-01-16T23:41:02Z

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 · 2019-01-24T16:48:33Z

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.

waniashik · 2019-01-29T14:18:11Z

I am struggling with the same issue, has this issue been fixed?

zhaodong-wang · 2019-02-17T02:09:53Z

FYI, it seems that I added opacity: 1 to the draggable items and the error disappears. Not sure why.

andyrue · 2019-02-28T13:31:44Z

I added a cdkDragHandle to an element inside my draggable component and I no longer got this error.

xdevnull · 2019-03-18T13:40:14Z

Any fix?

ibenjelloun · 2019-05-21T11:14:38Z

I'm reproducing this error on the stackblitz example from angular.io :
https://stackblitz.com/angular/dgxqejknvgg?file=app%2Fcdk-drag-drop-sorting-example.ts

…s finishing Fixes an error being thrown if the user manages to start a different drag sequence while the previous one is finishing. The error comes from the fact that some elements are still being moved around while we're waiting for the previous animation to finish. Fixes angular#13077.

AlyRadwan2020 · 2019-07-13T10:19:05Z

kflo · 2019-08-17T16:35:50Z

bump ...

angular-automatic-lock-bot · 2019-09-17T00:00:49Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

josephperrott assigned crisbeto Sep 11, 2018

josephperrott added the P4 A relatively minor issue that is not relevant to core functions label Sep 11, 2018

kanidjar mentioned this issue Sep 13, 2018

cdk-drop: allow drag-and-drop copy behavior #13100

Closed

crisbeto closed this as completed Sep 16, 2018

crisbeto added the has pr label May 21, 2019

crisbeto mentioned this issue May 21, 2019

fix(drag-drop): error if drag sequence is started while another one is finishing #16081

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 17, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kanidjar commented Sep 11, 2018

kanidjar commented Sep 13, 2018 •

edited

crisbeto commented Sep 15, 2018

kanidjar commented Sep 15, 2018

crisbeto commented Sep 16, 2018

kanidjar commented Sep 16, 2018

dakotamaker commented Oct 12, 2018

crisbeto commented Oct 12, 2018

jurStv commented Oct 22, 2018

antonpegov commented Nov 4, 2018

birjitningomba commented Nov 13, 2018

birjitningomba commented Nov 17, 2018 •

edited

birjitningomba commented Nov 20, 2018

millerlight commented Dec 1, 2018 •

edited

millerlight commented Dec 1, 2018

JesseZomer commented Dec 11, 2018 •

edited

cantastage commented Dec 12, 2018 •

edited

millerlight commented Dec 12, 2018

davidecavestro commented Jan 9, 2019 •

edited

jheyl commented Jan 16, 2019 •

edited

amumm commented Jan 24, 2019

waniashik commented Jan 29, 2019

zhaodong-wang commented Feb 17, 2019

andyrue commented Feb 28, 2019

xdevnull commented Mar 18, 2019

ibenjelloun commented May 21, 2019

AlyRadwan2020 commented Jul 13, 2019 •

edited

kflo commented Aug 17, 2019

angular-automatic-lock-bot bot commented Sep 17, 2019

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

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

Comments

kanidjar commented Sep 11, 2018

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

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

Is there anything else we should know?

kanidjar commented Sep 13, 2018 • edited

crisbeto commented Sep 15, 2018

kanidjar commented Sep 15, 2018

crisbeto commented Sep 16, 2018

kanidjar commented Sep 16, 2018

dakotamaker commented Oct 12, 2018

crisbeto commented Oct 12, 2018

jurStv commented Oct 22, 2018

antonpegov commented Nov 4, 2018

birjitningomba commented Nov 13, 2018

birjitningomba commented Nov 17, 2018 • edited

birjitningomba commented Nov 20, 2018

millerlight commented Dec 1, 2018 • edited

millerlight commented Dec 1, 2018

JesseZomer commented Dec 11, 2018 • edited

cantastage commented Dec 12, 2018 • edited

millerlight commented Dec 12, 2018

davidecavestro commented Jan 9, 2019 • edited

jheyl commented Jan 16, 2019 • edited

amumm commented Jan 24, 2019

waniashik commented Jan 29, 2019

zhaodong-wang commented Feb 17, 2019

andyrue commented Feb 28, 2019

xdevnull commented Mar 18, 2019

ibenjelloun commented May 21, 2019

AlyRadwan2020 commented Jul 13, 2019 • edited

kflo commented Aug 17, 2019

angular-automatic-lock-bot bot commented Sep 17, 2019

kanidjar commented Sep 13, 2018 •

edited

birjitningomba commented Nov 17, 2018 •

edited

millerlight commented Dec 1, 2018 •

edited

JesseZomer commented Dec 11, 2018 •

edited

cantastage commented Dec 12, 2018 •

edited

davidecavestro commented Jan 9, 2019 •

edited

jheyl commented Jan 16, 2019 •

edited

AlyRadwan2020 commented Jul 13, 2019 •

edited