bug(CdkDrag, CdkDragHandle): CdkDragHandle doesn't work when CdkDrag is set to host element

[evheniyrz]

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

not available

Description

CdkDragHandle doesn't work when CdkDrag is set to host element via @Component decorator - hostDirectives array.

Reproduction

StackBlitz link: https://stackblitz.com/~/github.com/evheniyrz/angular-cdk-drag-handle
GitHubRepo: https://github.com/evheniyrz/angular-cdk-drag-handle.git
Steps to reproduce:

1. Create a component that is a draggable popup with css resize; both property.
2. Attach the CdkDrag directive to the host. (/src/app/components/host-attached-directive/host-attached-directive.component.ts)
3. Add a cdkDragHandle directive (in this case the HTMLHeaderElement) to the first child element in the view (template)
4. Drag the window with the cursor positioned in a space other than the window header
5. Resize the element with right bottom corner

Expected Behavior

1. the window does not move if the cursor is in a space other than the window header
2. the element can be resized without moving behind the cursor
3. the element is moved only if the cursor is in the window title area

Actual Behavior

the window element moves whenever the cursor is positioned on the content

Environment

• Angular: "^17.2.0",
• CDK/Material: "^17.2.0",/"^17.2.0",
• Browser(s): Chrome 121.0.6167.185 (64-bit), any
• Operating System (e.g. Windows, macOS, Ubuntu): any

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