bug(CdkDrag): CdkDrag stays outside the boundary if it's size change

[gnemeth-ibl]

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

If the size of the drag boundary changes, the draggable element does not recalculate its position and remains outside the boundary.

Reproduction

StackBlitz link: https://stackblitz.com/edit/l8npyx4z?file=src%2Fexample%2Fcdk-drag-drop-boundary-example.html,src%2Fexample%2Fcdk-drag-drop-boundary-example.ts
Steps to reproduce:

1. Drag the element to the right edge
2. Click the resize button
3. The drag element is outside the boundary

Expected Behavior

The drag element should stay inside the boundary,

Actual Behavior

It stays outside the boundary.

Environment

• Angular: 19.0.5
• CDK/Material: 19.0.5
• Browser(s): Chrome 131.0.6778.265
• Operating System (e.g. Windows, macOS, Ubuntu): Win 11

[crisbeto]

Doing this automatically won't be efficient, because we'll have to poll the DOM for changes in the boundary element's position. That being said, we should have an API that will re-align the element to the boundary on demand.

[naaajii]

would something like this work?

<div #boundary class="example-boundary">
  <div #dragItem="cdkDrag" class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

<button mat-button (click)="onResizeClick(boundary, dragItem);">Resize boundary</button>

onResizeClick(boundary: HTMLElement, dragItem: CdkDrag) {
    boundary.style.width = '220px';
    dragItem.reset();
}

[gnemeth-ibl]

would something like this work?

I can only be dragged within the dotted container

<button mat-button (click)="onResizeClick(boundary, dragItem);">Resize boundary
onResizeClick(boundary: HTMLElement, dragItem: CdkDrag) {
boundary.style.width = '220px';
dragItem.reset();
}

I've tried it as workaround, but the problem with this reset is, that it moves the dragItem to its original position.