bug(CdkDrag): Breaking drag behavior when injecting CdkDrag directive into a component class.

[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

n/a

Description

For "@angular/cdk": "^17.3.1"=> "@angular/cdk": "^17.3.4".
When you inject a drag-and-drop directive into a component class using a constructor or injection function, the drag-and-drop behavior breaks.

Reproduction

StackBlitz link: https://stackblitz.com/~/github.com/evheniyrz/angular-cdk-drag-handle
component: src/app/pages/drop-sorting-implementation/drop-sorting-implementation.component.ts
Steps to reproduce:

1. Create template with = cdkDropListGroup => cdkDropList
2. Inject the CdkDrag directive into a component class using a constructor or injection function

Expected Behavior

the process of dragging elements is not disrupted

Actual Behavior

the entire CdkDropListGroup element moves following the mouse cursor

Environment

• Angular:"^17.3.1" => "^17.3.4",
• CDK/Material:"^17.3.1" => "^17.3.4"
• Browser(s):any
• Operating System (e.g. Windows, macOS, Ubuntu):any

[crisbeto]

This appears to be caused by the providers: [CdkDrag] in the DropSortingImplementationComponent. It's a bit unclear to me what the point of it is and which component it's referring to. Did you intend to use hostDirectives: [CdkDrag] instead?

[evheniyrz]

@crisbeto

This appears to be caused by the providers: [CdkDrag] in the DropSortingImplementationComponent. It's a bit unclear to me what the point of it is and which component it's referring to. Did you intend to use hostDirectives: [CdkDrag] instead?

here I was just testing where, what data I could get, and I discovered this behavior.

The best option in this case is to get a directive using @ViewChildren / @ViewChild.

If this behavior cannot be corrected yet, then you can close this issue.

What about getting incorrect indexes (current /previous) in the DROP function when dragging elements that are located in a multi-line content view?
I commented in the log inside the DROP function.

drop(event: CdkDragDrop<DropItem[]>): void {
    if (event.container === event.previousContainer) {
      console.log('IN SAME', { 
        crr: event.currentIndex, // with multiline content - index is incorrect
        prev: event.previousIndex, // with multiline content - index is incorrect
        dr: this.cdkDrag 
      });
    
    }
  }

Is it necessary to create a separate issue or not yet)))?

[crisbeto]

Regarding the DI behavior: this is just how DI in Angular works so we can't do much about it. When you set providers: [CdkDrag], Angular will either try to find the closest CdkDrag in the tree or create a new one by instantiating the class. In this case it doesn't make sense since the class is a component, rather than an injectable.

As for the multi-line content: is that the same issue as #13372?

[evheniyrz]

@crisbeto
FINE. Thank you. Then I'll close this issue.

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