fix(cdk/drag-drop): allow using cdkDragRootElement w/ comment tag

[lekhmanrus]

Makes possible to use the following syntax to make dialogs draggable:

<ng-container cdkDrag cdkDragRootElement=".cdk-overlay-pane">
  <h1 mat-dialog-title class="dialog-draggable" cdkDragHandle>Title</h1>
  <div mat-dialog-content>Content</div>
</ng-container>

Because of ng-container renders to comment and HTML comment doesn't have .closest() method we can use element.parentElement.closest for rootElementSelector searching.

P.S.: provided HTML code was working till cdk v12.2.6 and stopped working on >= v13.0.0-next.2. Not sure what was changed.

[crisbeto]

This also needs a unit test. I suspect that the regression was caused by #23293.

[crisbeto]

Sorry for nitpicking, but I think that you'll have to push again anyway because the CI didn't run.

Using bind here is a little wasteful since it creates a new function. It would be better to use apply or call.

[lekhmanrus]

@crisbeto thanks! 🙂

[crisbeto]

Looks like the new test is failing.

[lekhmanrus]

Looks like the new test is failing.

I have no idea why, but I was passing this instead of element to closest.call().))
Fixed now.

[crisbeto]

LGTM. Marking this as a P2, because it fixes a regression.

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