Skip to content

bug(drag-drop): Wrong type assumed for dropped item in CdkDropList's cdkDropListEntered (alias for "entered") #29212

Open
@odermattaccso

Description

@odermattaccso

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

No response

Description

I'm facing an issue where Typescript won't allow me to use strongly typed version of CdkDragEnter. In a service I have a method with defined types for CdkDragEnter's item and container data.

https://github.com/angular/components/blob/main/src/cdk/drag-drop/directives/drop-list.ts#L138

CdkDropList's entered is typed like this: EventEmitter<CdkDragEnter<T>> which results in CdkDragEnter's 2nd type argument assuming the same type as the 1st argument. That way it won't allow me to define two different types for the container's and the item's data.

Reproduction

StackBlitz link:
Steps to reproduce:

  1. define an element in template
  2. add cdkDropList directive
  3. add arbitrary data to cdkDropListData directive
  4. add (cdkDropListEntered)="onDropListEnter($event) to react to the event
  5. define onDropListEnter liks this:
  onDropListEnter(event: CdkDragEnter<DropListDataType, SomeDragItemType>) {
    this.dropListEnterEvent.emit(event);
  }

Expected Behavior

Typing for entered Event Emitter allows different types between item and container data.
This is already the case for the dropped Event Emitter which is typed like this: EventEmitter<CdkDragDrop<T, any>>
So I'm guessing that this could already be a possible solution?

Actual Behavior

$event in (cdkDropListEntered)="onDropListEnter($event) gets highlighted in red and build fails because The types of 'container.data' are incompatible between these types.

Environment

Angular CLI: 17.3.3
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 17.3.4
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1703.3
@angular-devkit/build-angular 17.3.3
@angular-devkit/core 17.3.3
@angular-devkit/schematics 17.3.3
@angular/cdk 17.3.3
@angular/cli 17.3.3
@schematics/angular 17.3.3
rxjs 7.8.1
typescript 5.3.3
zone.js 0.14.4

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: cdk/drag-drop

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions