bug(DragDrop): DragDrop started to be draggable outside of it's zone

[laserus]

Reproduction

New feature/bug appeared in version 9.

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-nd8jwz-ochxmy?file=src%2Fapp%2Fmodal-basic.module.ts

Steps to reproduce:

1. Open Modal
2. Try to select text "Date of birth" with mouse
3. For some reason the whole modal is moving

Expected Behavior

Previously, with version 8.1.4 only modal-header was place which allowed to drag modal and nothing prevented from modal-body selecting and interacting with mouse.

Actual Behavior

What behavior did you actually see?
I cannot select any text, or any input, as the whole modal is moving, although cdkDrag attached only to header and modal-dialog used only for pointer to modal which is movable by header dragging.

Environment

• Angular:
  "@angular/animations": "~9.1.11",
  "@angular/cdk": "~9.2.4",
  "@angular/common": "~9.1.11",
  "@angular/compiler": "~9.1.11",
  "@angular/core": "~9.1.11",
  "@angular/forms": "~9.1.11",
  "@angular/localize": "^9.1.11",
  "@angular/platform-browser": "~9.1.11",
  "@angular/platform-browser-dynamic": "~9.1.11",
  "@angular/router": "~9.1.11",
  "core-js": "^2.6.7",
  "ts-helpers": "^1.1.2",
  "tslib": "^1.10.0",
  "web-animations-js": "^2.3.2",
  "zone.js": "~0.10.2"
• CDK/Material: 9.2.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): image: node:12.6.0

[crisbeto]

I think it may be resolved by #19559 which was merged in yesterday.

[jelbourn]

@laserus let us know if this is fixed in the next patch release

[laserus]

@jelbourn will you release also new version of 9 with this patch? or it will be only 10?

[jelbourn]

We don't plan on publishing any further 9.x releases unless there's some major bug (security, browser compatibility, etc.)

[laserus]

@crisbeto Is recent release includes the fix?

I quickly tried it, and have got an error:
https://stackblitz.com/edit/angular-ukjcnf?file=src%2Fapp%2Fmodal-basic.html

[laserus]

@jelbourn I think in 10. There is worse bug was introduced, please check the previous message and example. I also tried your stackblitz example, https://stackblitz.com/edit/components-issue-l3lbs5

Normally, I do not upgrade project to the latest majors, because of unexplored bugs. It would be cool to add such fix to 9.x.

[crisbeto]

@laserus the error is because you've set cdkDragHandle on an ng-template which won't work since the template corresponds to an HTML comment node. We have an error for this on cdkDrag, but we forgot to add it to cdkDragHandle which is throwing before it can reach the cdkDrag assertion.

Does it work if you move the cdkDrag and cdkDragHandle to something that isn't an ng-template? e.g.

<ng-template #content>
  <div cdkDrag cdkDragHandle></div>
</ng-template>

[Achilles1515]

@crisbeto @laserus
I believe this one can be closed.
StackBlitz from OP with updated dependencies no longer showing the issue.

[laserus]

Yes, it seems that it is solved now. Thanks

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