bug(MatDialogRef): updatePosition is not consistent for previously dragged dialog

[Nicolas-Hermet]

Reproduction

The updatePosition() doesn't seem to be consistent if the dialog is previously dragged.

It is my understanding, according to the documentation that updatePosition({bottom: '5px', right: '0px'}) will place my dialog at the bottom right of its container (cdk-overlay-container if I'm right ?).

Here is a forked StackBlitz from the documentation with, of course, minor changes.

With it, please:

1. open the dialog
2. click on the "minimize" button next to the title (dialog goes to the bottom right of the screen as expected : 👍 nice).
3. click on the "maximize" button next to the title to get the dialog back to it initial place. Also 👍 nice.

so far so good !

4. drag the dialog downwards (or in any direction you want) generously and minimize it again.

Expected Behavior

The dialog should be at the exact same place as it was after step 2.

Actual Behavior

The dialog's position has been updated, but with an additionnal translation. (That additionnal translation seems to be of the same length as the previous drag.)

Worst : you can get the dialog outside of the screen if your drag was too generous, preventing you from dragging it back on visual.

Environment

• Angular: 9.1.7 (but discovered and reproduced in 7.3.4)
• CDK/Material: 9.2.4 (but discovered and reproduced in 6.4.1)
• Chrome 83.0.4103.61 64bits
• Windows 10 64bits

[crisbeto]

I think the problem here is that drag&drop and the dialog don't know about each other so updatePosition won't know to clear the previous position and the dragging directive won't know that the position was cleared. You could tell the dragging directive that the position is being cleared through the cdkDragFreeDragPosition input, although that's not super convenient.

[Nicolas-Hermet]

Ok thanks for the tips, I'll try that. If it can bring me a work around I'll take it !

Do you think it would be safe to handle the drag as it is in my stackblitz but minimize and maximize with only pure CSS and DOM manipulation ?

[DinaRoth]

HI I also have a similar problem. How did you manage in the end?

[Nicolas-Hermet]

HI I also have a similar problem. How did you manage in the end?

I quit the job, but technically, we had to figure out an other UX way to do what we wanted. I didn't code in Angular anymore. So I unfortunately have no insight if a newer version correct the issue, sorry.

[wesleyzloza]

The solution/suggestion provided by @crisbeto was insightful. There definitely is an issue with managing position of dialogs that utilize the drag-drop module. I tried applying position updates via the position strategy (specifically, using a GlobalPositionStrategy and the DialogRef.updatePosition() method), however, that did not work - it resulted in my dialog jumping across the screen after being dragged again. I then tried several other combinations of methods with no avail.

My only success came after stumbling across this issue and seeing the suggestion to use the cdkDragFreeDragPosition input. This worked pretty nicely, although not ideal. Here is a StackBlitz of my working solution. In the example, the dialog remembers it's last position and is prevented from being dragged off screen.