bug(@angular/cdk): dragStart event completely blocked within cdkDrag element

[loebi-ch]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13.2.3

Description

Inside a Angular's cdkDropList I use another third party library for sorting a grid (display:flex; flex-wrap:wrap) with Drag'n'Drop. After upgrading Angular's CDK from version 13.2.3 to 13.2.4 this third party component stopped working.

After some detailed research I've found the root cause in cdk/drag-drop/drag-ref.ts:

With this added line you'll break the dragstart event, what makes it impossible to use any other drag'n'drop functionality within CDK's Drag'n'Drop functionality.

Reproduction

No steps to reproduce.

Expected Behavior

The dragstart event should still be fired within an cdkDrag element.

Actual Behavior

dragstart event is completely blocked with event.preventDefault(), which makes it absolutely impossible to use Angular's Drag'n'Drop functionality with custom or even native Drag'n'Drop functionality inside.

Environment

• Angular: 13.2.4
• CDK/Material: 13.2.4
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

In general we don't make changes to accommodate other libraries, because it would be really difficult to support all of the possible combinations.

[loebi-ch]

It's not only related to third party libraries. You break the native browser's dragstart event. And I even don't understand why.

[crisbeto]

The whole point of the cdk/drag-drop library is to be an alternative to native dragging. We're preventing many more native interactions, not just the dragstart (e.g. mouse clicks, scrolling), in order to prevent them from interfering with the dragging.

[loebi-ch]

I've just read #24403 and I do understand your point.

BUT: Actually if I use CDK's cdkDragHandle option, then the dragstart event should not be blocked for the whole cdkDrag element, but only the handle element. Don't you agree?

[loebi-ch]

I have found a solution for my problem. Inside a cdkDrag element I use (dragstart)="$event.stopPropagation()":

<div cdkDropList>
	 <div class="block" cdkDrag>
		<span cdkDragHandle>HANDLE</span> Block 1
	 </div>
	 <div class="block" cdkDrag>
		<span cdkDragHandle>HANDLE</span> Block 2
		<div (dragstart)="$event.stopPropagation()">
			<!-- Now I can use navtive Drag'n'Drop (or third party library) here again -->
		</div>
	 </div>
</div>

I still think that the dragstart event should only be blocked for the handle element and not the whole cdkDrag element when using cdkDragHandle.

Best regards,
Andy

[crisbeto]

That makes sense, it's how the mousedown/touchstart event works as well. I've sent out #24581 to fix it.

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