Skip to content

bug(CdkDropList): addItem() doesn't register drop container on CdkDrag #31514

Closed
@ak99372

Description

@ak99372

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

CdkDropList.addItem() - doesn't fully register an item with the drop list, when optional dependency [dropContainer] is null at the creation of CdkDrag

dropContainer = inject(CDK_DROP_LIST, { optional: true, skipSelf: true });

calling dropList.addItem(dragItem); later on to register drop list doesn't include the call referencing the drop container with _dragRef i.e. this._dragRef._withDropContainer(dropContainer._dropListRef);

as it happens in CdkDrag constructor:

 if (dropContainer) {
            this._dragRef._withDropContainer(dropContainer._dropListRef);
            dropContainer.addItem(this);
        ...
}

as a result the element is draggable but without drop list.

Reproduction

Having 2 components:
componentA: <div cdkDropList><ng-content></ng-content></div>
componentB: <div cdkDrag></div>

Use them together

<componentA>
    <componentB/>
    <componentB/>
</componentA>

and call dropContainer.addItem(item); for each componentB

Expected Behavior

CdkDropList.addItem(item) to fully register item with CdkDropList

Actual Behavior

Components are draggable but not connected to drop list.

Environment

  • Angular: 19.2.15
  • CDK/Material: 19.2.19
  • Browser(s): All
  • Operating System: Windows, macOS:

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/drag-drop

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions