ng-sortgrid inside cdkDrag element broken since Angular CDK version 13.2.4

[loebi-ch]

Yesterday I updated one of my projects from Angular 13.2.3 to 13.2.4 and I've just realized that ng-sortgrid does not work anymore.

These are the changes made to Angular:

[loebi-ch]

I'm very sorry for this imprecise bug report.

In the meantime I setup a brand new Angular "Hello World" project and realized that ng-sortgrid works with Angular version 13.2.4.
So I went deeper in root cause analyses and found out what causes the issue I encountered in my project.

Generally, I use Angular's CDK Drag'n'Drop functionality to make blocks in vertical order sortable. Inside one of these blocks I have a grid that I made sortable with ng-sortgrid because Angular Drag'n'Drop functionality with display: flex; flex-wrap: wrap is still a big pain in the ass.

So far this worked like a charm, but with upgrading Angular from version 13.2.3 to 13.2.4 ng-sortgrid functionality broke completely, because mouse events were not recognized anymore with ng-sortgrid.
When I remove Angular's CDK Drag'n'Drop functionality in the parent's DIV, ng-sortgrid works again.

I don't have a solution yet, but it has absolutely nothing to do with ng-sortgrid, so I close this issue.

[nivekcode]

@loebi-ch. Wow. Thx a lot for the research and the awesome explanation. Glad to hear that it works. I already started researching a bit but couldn't figure out a solution. But thx to your explanation everything makes perfect sense now. Thx a lot 👍

[loebi-ch]

I've found the root cause in Angular's cdk/drag-drop/drag-ref.ts
In Angular CDK version 13.2.4 they've added a line to preventDefault() on dragstart event.

If I comment out the above line again, ng-sortgrid works again.

[loebi-ch]

I opened a new bug report within angular/components:
angular/components#24533

[nivekcode]

👍

[loebi-ch]

I have found a solution:

Use (dragstart)="$event.stopPropagation()" within cdkDrag element:

<div cdkDropList>
	 <div class="block" cdkDrag>
		<span cdkDragHandle>:</span> Block 1
	 </div>
	 <div class="block" cdkDrag>
		<span cdkDragHandle>:</span> Block 2
		<ul (dragstart)="$event.stopPropagation()">
			<li *ngFor="let item of items" ngSortgridItem [ngSortGridItems]="items">List Item {{item}}</li>
		</ul>
	 </div>
</div>