Draggable element is not inside of the node passed into cdkDragBoundary.

[mgameover]

Hi everyone,

Is there a specific reason for this check drag.ts#L363-L366?

    if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
      !element.contains(this.element.nativeElement)) {
      throw Error('Draggable element is not inside of the node passed into cdkDragBoundary.');
    }

The thing is it throws the error only in devMode, but it works perfectly fine in production. I think those lines can be removed.

Reproduction

Steps to reproduce:

1. Use the following html markup

<div #boundaryHTMLElement style="width:640px;height:480px"></div>
<div 
	cdkDrag
	[cdkDragBoundary]="boundaryHTMLElement"
>...</div>

2. run application in dev mode (ng serve)
3. Drag element: error appears in console log, draggable's position is not constrained
4. Build app for production (ng build --configuration production)
5. Drag element: no errors in console log, draggable's position is constrained

Expected Behavior

Same (production) behavior for dev environment

Actual Behavior

The following exception is thrown (in ngDevMode only)

Uncaught Error: Draggable element is not inside of the node passed into cdkDragBoundary.
    at CdkDrag._getBoundaryElement (drag-drop.js:3418)
    at SafeSubscriber._next (drag-drop.js:3446)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at Subject.next (Subject.js:39)
    at HTMLDivElement.DragRef._pointerDown (drag-drop.js:411)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:434)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:205)
_getBoundaryElement @ drag-drop.js:3418

Environment

• Angular: 12.2.10
• CDK/Material: 12.2.9
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): any

[crisbeto]

The whole point of a boundary is to constrain the position of an element. It's pointless for it to not be an ancestor.

[mgameover]

The whole point of a boundary is to constrain the position of an element. It's pointless for it to not be an ancestor.

Hi crisbeto, I can't agree at this point.
In my case, an cdk-overlay element is constrained by boundary element and it is not an ancestor. Moreover everything works fine (but not in devMode), because only client rect is used for that constraining, so element doesn't have to be an ancestor.

Thanks

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