Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(cdk/drag-drop): incorrectly sorting element inside dialog with blocked scrolling #14806

Merged
merged 1 commit into from
Feb 23, 2022

Conversation

crisbeto
Copy link
Member

We use the ViewportRuler to determine how much a page has been scrolled in order to compensate for it in some of the ClientRect-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the html node which in turn throws off the ViewportRuler. These changes switches to reading the values off the window which won't be thrown off.

Fixes #14280.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Jan 12, 2019
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 12, 2019
@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch from ce1bc90 to 2ac201b Compare January 12, 2019 17:12
@ngbot
Copy link

ngbot bot commented Jan 25, 2019

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch from 2ac201b to 91e4c36 Compare January 26, 2019 13:59
@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch 4 times, most recently from 46bc0a9 to ce3a3d1 Compare February 11, 2019 07:00
@fhewitt
Copy link

fhewitt commented Mar 26, 2019

Same issue here: the reordering is broken when inside a dialog component while the page is scrolled. We're absolutely interested by a fix for that bug.

@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch from ce3a3d1 to 5fa10c2 Compare April 7, 2019 17:47
@mmalerba mmalerba added aaa and removed aaa labels Apr 25, 2019
@andrewseguin andrewseguin added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label May 30, 2019
@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch from 5fa10c2 to c1c1a4b Compare July 16, 2019 20:40
@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch from c1c1a4b to cf3856c Compare August 6, 2019 13:36
@DanBoSlice
Copy link

Any updates here?

@andrewseguin andrewseguin removed the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 29, 2021
@crisbeto crisbeto changed the title fix(drag-drop): incorrectly sorting element inside dialog with blocked scrolling fix(cdk/drag-drop): incorrectly sorting element inside dialog with blocked scrolling Feb 23, 2022
…ocked scrolling

We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off.

Fixes angular#14280.
@crisbeto crisbeto force-pushed the 14280/drag-drop-dialog-offset branch from cf3856c to 3d65dcf Compare February 23, 2022 14:44
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Feb 23, 2022
@crisbeto
Copy link
Member Author

I got around to rebasing this one and fixing the CI failures. Also bumping the priority since this issue has come up multiple times now.

Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Feb 23, 2022
@crisbeto crisbeto merged commit 3e1de9d into angular:master Feb 23, 2022
crisbeto added a commit that referenced this pull request Feb 23, 2022
…ocked scrolling (#14806)

We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off.

Fixes #14280.

(cherry picked from commit 3e1de9d)
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Mar 8, 2022
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.2.3` -> `13.2.4`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.2.3/13.2.4) |
| [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.2.3` -> `13.2.4`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.2.3/13.2.4) |

---

### Release Notes

<details>
<summary>angular/components</summary>

### [`v13.2.4`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#&#8203;1324-plastic-mug-2022-02-23)

[Compare Source](angular/components@13.2.3...13.2.4)

##### cdk

| Commit | Type | Description |
| -- | -- | -- |
| [74bae85bc5](angular/components@74bae85) | fix | **drag-drop:** incorrectly sorting element inside dialog with blocked scrolling ([#&#8203;14806](angular/components#14806)) |
| [81898ca5f6](angular/components@81898ca) | fix | **drag-drop:** stop pointer events on placeholder ([#&#8203;24404](angular/components#24404)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [6b76469b4a](angular/components@6b76469) | fix | **autocomplete:** closing immediately when input is focused programmatically ([#&#8203;21081](angular/components#21081)) |
| [3ea76419c8](angular/components@3ea7641) | fix | **autocomplete:** use narrow value for aria-haspopup ([#&#8203;15361](angular/components#15361)) |
| [9a12eabf6b](angular/components@9a12eab) | fix | **button-toggle:** unable to override elevation and high contrast styling applied incorrectly ([#&#8203;14722](angular/components#14722)) |
| [cbd4b0ce4f](angular/components@cbd4b0c) | fix | **checkbox:** clear static aria attributes from host nodes ([#&#8203;17092](angular/components#17092)) |
| [f6eaa7c1cf](angular/components@f6eaa7c) | fix | **form-field:** use correct color for form fields in high contrast mode ([#&#8203;24422](angular/components#24422)) |
| [39d7834797](angular/components@39d7834) | fix | **radio:** clicks not propagating to wrapper elements ([#&#8203;24459](angular/components#24459)) |
| [5988b8f77b](angular/components@5988b8f) | fix | **radio:** not checked on first click if partially visible ([#&#8203;19505](angular/components#19505)) |
| [33716f124b](angular/components@33716f1) | fix | **select:** arrow highlighted state not updating in Safari ([#&#8203;15281](angular/components#15281)) |
| [fc204e4f4d](angular/components@fc204e4) | fix | **sidenav:** prevent focus from entering hidden sidenav if child element has a visibility |
| [5e41a0ad09](angular/components@5e41a0a) | fix | **tabs:** use buttons for paginator also tab-header and mdc ([#&#8203;24338](angular/components#24338)) |

##### material-experimental

| Commit | Type | Description |
| -- | -- | -- |
| [4198f5b5dc](angular/components@4198f5b) | fix | **mdc-dialog:** align change detection with non-MDC version ([#&#8203;24451](angular/components#24451)) |
| [45836f924d](angular/components@45836f9) | fix | **mdc-list:** fix typo in action-list css class ([#&#8203;24448](angular/components#24448)) |
| [7ca02495cd](angular/components@7ca0249) | fix | **mdc-list:** use body-1 rather than subtitle-1 typography for list items ([#&#8203;24417](angular/components#24417)) |
| [c9a15476e8](angular/components@c9a1547) | fix | **mdc-select:** target correct element with typography ([#&#8203;24258](angular/components#24258)) |
| [bd3f39fb15](angular/components@bd3f39f) | perf | **mdc-table:** reduce bundle size ([#&#8203;24309](angular/components#24309)) |

#### Special Thanks

Alireza Ebrahimkhani, Arthur Ming, Jeri Peier, Kristiyan Kostadinov, Miles Malerba, Paul Gschwendtner and renovate\[bot]

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1188
Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org>
Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 26, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Drag-and-drop is offset inside dialog if page is scrolled before opening dialog
7 participants