angular / angular/components

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

Open
#19,539 5 comments 4 reactions 0 assignees View on GitHub
area: cdk/drag-drop area: material/dialog P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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](https://stackblitz.com/edit/angular-hc5lgp?file=app%2Fdialog-overview-example.ts) 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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the behavior in the linked StackBlitz, focusing on MatDialogRef.updatePosition() after the dialog has been dragged. Trace how dragging and the bottom-right position interact, then verify that minimizing after a drag places the dialog at the same position as before the drag.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.