Drag And Drop Angular Material Table on first drop

[PedroRamirezTOR]

Bug:

I have a mat-table in a div container that is only created when table datasource is not empty with an ngIf. So when datasource is not empty and I try to drag and drop a row, first time I receive currentposition with -1 value on drop event. So first time no drag and drop is made. The following time the behavior is normal. Moreover, I realised that If table is shown and I click on a button with no functionality the drag and drop is made right on first time.

You could find more details on:
https://stackoverflow.com/questions/59127462/angular-material-mattable-drag-and-drop

Any idea? Thanks!

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

"@angular/animations": "^7.0.4",
"@angular/cdk": "^7.1.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": "^7.1.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"angular-datatables": "^7.0.0",
"angular-mocks": "^1.7.5",
"angularjasper2": "0.0.3",
"bootstrap": "^4.1.3",
"canvas2image": "^1.0.5",
"core-js": "^2.5.4",
"datatables.net": "^1.10.19",
"datatables.net-dt": "^1.10.19",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-alpha.12",
"html2pdf.js": "^0.9.1",
"jquery": "^3.3.1",
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.2.10",
"ng-mocks": "^7.1.3",
"ngx-mat-select-search": "^2.0.0",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.3.3",
"tslib": "^1.10.0",
"tslint-sonarts": "^1.8.0",
"typescript-compiler": "^1.4.1-2",
"zone.js": "~0.8.26"

[crisbeto]

Can you post an example that shows the issue? The one linked in the StackOverflow question seems to work correctly.

[PedroRamirezTOR]

Hi crisbeto!

Here you have an example:

https://stackblitz.com/edit/table-drag-n-drop-n5jitk?file=app%2Ftable-basic-example.ts

When you click on show button and try to drag an element, it will not be dragged.

Thanks in advance!

[PedroRamirezTOR]

[PedroRamirezTOR]

Hi @crisbeto , could you try the link?

[crisbeto]

Thank you @PedroRamirezTOR, I can see the error now. I haven't had time to investigate it yet.

[crisbeto]

I finally got around to checking this out again and the issue seems to come from mat-table. The way the CDK drop list works is by looking for items using ContentChildren and then assigning itself as the parent. The problem here is that when mat-table renders initially, the ContentChildren query is empty and when the dragging starts, another change detection is triggered which populates it. What ends up happening is that the dragging sequence is initialized as if there is no drop list and then mid-way through the drop list is assigned, but a lot of the information that we gather on initialization isn't available. @andrewseguin do you know whether we can get the table to update the ContentChildren?

[crisbeto]

This should be resolved in master since we've changed how the drop list registers and keeps track of its items.

[angular-automatic-lock-bot]

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