From 1c8e656f03b900c9df20cd8a83a55b7806433f06 Mon Sep 17 00:00:00 2001 From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com> Date: Wed, 25 Aug 2021 14:29:48 +0300 Subject: [PATCH] fix(ui5-dialog): correctly restore body scrolling on ESC (#3696) Body scrolling is now blocked only on first call of blockBodyScrolling and restored on the last call of unblockBodyScrolling. Fixes #3690 --- packages/main/src/Popup.js | 21 +++++-- .../src/popup-utils/OpenedPopupsRegistry.js | 2 +- packages/main/test/pages/Dialog.html | 11 +++- packages/main/test/specs/Dialog.spec.js | 58 +++++++++++++------ 4 files changed, 67 insertions(+), 25 deletions(-) diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index daf2b50c4064..516076ffa125 100644 --- a/packages/main/src/Popup.js +++ b/packages/main/src/Popup.js @@ -8,7 +8,7 @@ import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js"; import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js"; import PopupTemplate from "./generated/templates/PopupTemplate.lit.js"; import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js"; -import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js"; +import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js"; // Styles import styles from "./generated/themes/Popup.css.js"; @@ -162,6 +162,8 @@ const createBlockingStyle = () => { createBlockingStyle(); +let bodyScrollingBlockers = 0; + /** * @class *

Overview

@@ -249,6 +251,12 @@ class Popup extends UI5Element { * @protected */ static blockBodyScrolling() { + bodyScrollingBlockers++; + + if (bodyScrollingBlockers !== 1) { + return; + } + if (window.pageYOffset > 0) { document.body.style.top = `-${window.pageYOffset}px`; } @@ -260,6 +268,12 @@ class Popup extends UI5Element { * @protected */ static unblockBodyScrolling() { + bodyScrollingBlockers--; + + if (bodyScrollingBlockers !== 0) { + return; + } + document.body.classList.remove("ui5-popup-scroll-blocker"); window.scrollTo(0, -parseFloat(document.body.style.top)); document.body.style.top = ""; @@ -435,12 +449,9 @@ class Popup extends UI5Element { return; } - const openedPopups = getOpenedPopups(); if (this.isModal) { this._blockLayerHidden = true; - if (openedPopups.length === 1) { - Popup.unblockBodyScrolling(); - } + Popup.unblockBodyScrolling(); } this.hide(); diff --git a/packages/main/src/popup-utils/OpenedPopupsRegistry.js b/packages/main/src/popup-utils/OpenedPopupsRegistry.js index 698339d96d9a..644b8e495d0e 100644 --- a/packages/main/src/popup-utils/OpenedPopupsRegistry.js +++ b/packages/main/src/popup-utils/OpenedPopupsRegistry.js @@ -35,7 +35,7 @@ const _keydownListener = event => { } if (isEscape(event)) { - openedRegistry.pop().instance.close(true); + openedRegistry[openedRegistry.length - 1].instance.close(true); } }; diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html index 012b5c3649a1..0c607e722571 100644 --- a/packages/main/test/pages/Dialog.html +++ b/packages/main/test/pages/Dialog.html @@ -26,6 +26,7 @@ +
Open Streched Dialog
@@ -322,7 +323,7 @@

- Open Popover + Open Dialog @@ -369,11 +370,17 @@ Empty + +