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

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]

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