fix(ui5-dialog): reposition on screen resize (#5283)

A recent change in scroll blocking for the block layer added 
`overflow: hidden` on the body element,
and resizing the browser window in height would not trigger a resize
event on the body, and the dialog will not be repositioned.

To solve this case, the dialog has been changed to listen to the resize
event on the window.

packages/main/src/Dialog.js

@@ -1,6 +1,5 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
 	isUp, isDown, isLeft, isRight,
 	isUpShift, isDownShift, isLeftShift, isRightShift,
@@ -253,7 +252,7 @@ class Dialog extends Popup {
 	}
 
 	/**
-	 * Determines if the header of the dialog should be shown.
+	 * Determines if the header should be shown.
 	 */
 	get _displayHeader() {
 		return this.header.length || this.headerText || this.draggable || this.resizable;
@@ -308,12 +307,12 @@ class Dialog extends Popup {
 
 	onEnterDOM() {
 		super.onEnterDOM();
-		this._attachResizeHandlers();
+		this._attachScreenResizeHandler();
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 	}
 
 	/**
@@ -322,22 +321,22 @@ class Dialog extends Popup {
 	_resize() {
 		super._resize();
 
-		if (this._resizeHandlersAttached) {
+		if (this._screenResizeHandlerAttached) {
 			this._center();
 		}
 	}
 
-	_attachResizeHandlers() {
-		if (!this._resizeHandlersAttached) {
-			ResizeHandler.register(document.body, this._screenResizeHandler);
-			this._resizeHandlersAttached = true;
+	_attachScreenResizeHandler() {
+		if (!this._screenResizeHandlerAttached) {
+			window.addEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = true;
 		}
 	}
 
-	_detachResizeHandlers() {
-		if (this._resizeHandlersAttached) {
-			ResizeHandler.deregister(document.body, this._screenResizeHandler);
-			this._resizeHandlersAttached = false;
+	_detachScreenResizeHandler() {
+		if (this._screenResizeHandlerAttached) {
+			window.removeEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = false; // prevent dialog from repositioning during resizing
 		}
 	}
 
@@ -475,7 +474,7 @@ class Dialog extends Popup {
 	}
 
 	_resizeWithEvent(event) {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 		this.addEventListener("ui5-before-close", this._revertSize);
 
 		const { top, left } = this.getBoundingClientRect(),
@@ -512,7 +511,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseDragHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
@@ -610,7 +609,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseResizeHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);

packages/main/src/Popup.js

@@ -114,7 +114,7 @@ const metadata = {
 		 * @type {string}
 		 * @private
 		 */
-		 mediaRange: {
+		mediaRange: {
 			type: String,
 		},
 

packages/main/test/pages/modules/Popups.js

@@ -1,49 +1,49 @@
-	// web component dialog
-	var wcBtnOpenDialog = document.querySelector('.wcBtnOpenDialog');
-	wcBtnOpenDialog.addEventListener('click', function () {
-		var wcDialog = document.querySelector('.wcDialog');
-		wcDialog.show();
-	});
+// web component dialog
+var wcBtnOpenDialog = document.querySelector('.wcBtnOpenDialog');
+wcBtnOpenDialog.addEventListener('click', function () {
+	var wcDialog = document.querySelector('.wcDialog');
+	wcDialog.show();
+});
 
-	var wcBtnCloseDialog = document.querySelector('.wcBtnCloseDialog');
-	wcBtnCloseDialog.addEventListener('click', function () {
-		var wcDialog = document.querySelector('.wcDialog');
-		wcDialog.close();
-	});
+var wcBtnCloseDialog = document.querySelector('.wcBtnCloseDialog');
+wcBtnCloseDialog.addEventListener('click', function () {
+	var wcDialog = document.querySelector('.wcDialog');
+	wcDialog.close();
+});
 
-	var wcBtnOpenNewDialog = document.querySelector('.wcBtnOpenNewDialog');
-	wcBtnOpenNewDialog.addEventListener('click', function () {
-		var wcNewDialog = document.querySelector('.wcNewDialog');
-		wcNewDialog.show();
-	});
+var wcBtnOpenNewDialog = document.querySelector('.wcBtnOpenNewDialog');
+wcBtnOpenNewDialog.addEventListener('click', function () {
+	var wcNewDialog = document.querySelector('.wcNewDialog');
+	wcNewDialog.show();
+});
 
-	var wcBtnOpenNewDialogPopover = document.querySelector('.wcBtnOpenNewDialogPopover');
-	wcBtnOpenNewDialogPopover.addEventListener('click', function () {
-		var wcNewDialogPopover = document.querySelector('.wcNewDialogPopover');
-		wcNewDialogPopover.showAt(wcBtnOpenNewDialogPopover);
-	});
+var wcBtnOpenNewDialogPopover = document.querySelector('.wcBtnOpenNewDialogPopover');
+wcBtnOpenNewDialogPopover.addEventListener('click', function () {
+	var wcNewDialogPopover = document.querySelector('.wcNewDialogPopover');
+	wcNewDialogPopover.showAt(wcBtnOpenNewDialogPopover);
+});
 
-	// web component popover
-	var wcBtnOpenPopover = document.querySelector('.wcBtnOpenPopover');
-	wcBtnOpenPopover.addEventListener('click', function () {
-		var wcPopover = document.querySelector('.wcPopover');
-		wcPopover.showAt(wcBtnOpenPopover);
-	});
+// web component popover
+var wcBtnOpenPopover = document.querySelector('.wcBtnOpenPopover');
+wcBtnOpenPopover.addEventListener('click', function () {
+	var wcPopover = document.querySelector('.wcPopover');
+	wcPopover.showAt(wcBtnOpenPopover);
+});
 
-	var wcBtnClosePopover = document.querySelector('.wcBtnClosePopover');
-	wcBtnClosePopover.addEventListener('click', function () {
-		var wcPopover = document.querySelector('.wcPopover');
-		wcPopover.close();
-	});
+var wcBtnClosePopover = document.querySelector('.wcBtnClosePopover');
+wcBtnClosePopover.addEventListener('click', function () {
+	var wcPopover = document.querySelector('.wcPopover');
+	wcPopover.close();
+});
 
-	var wcBtnOpenNewPopover = document.querySelector('.wcBtnOpenNewPopover');
-	wcBtnOpenNewPopover.addEventListener('click', function () {
-		var wcNewPopover = document.querySelector('.wcNewPopover');
-		wcNewPopover.showAt(wcBtnOpenNewPopover);
-	});
+var wcBtnOpenNewPopover = document.querySelector('.wcBtnOpenNewPopover');
+wcBtnOpenNewPopover.addEventListener('click', function () {
+	var wcNewPopover = document.querySelector('.wcNewPopover');
+	wcNewPopover.showAt(wcBtnOpenNewPopover);
+});
 
-	var wcBtnOpenNewPopoverDialog11 = document.querySelector('.wcBtnOpenNewPopoverDialog11');
-	wcBtnOpenNewPopoverDialog11.addEventListener('click', function () {
-		var wcNewPopoverDialog11 = document.querySelector('.wcNewPopoverDialog11');
-		wcNewPopoverDialog11.show();
-	});
+var wcBtnOpenNewPopoverDialog11 = document.querySelector('.wcBtnOpenNewPopoverDialog11');
+wcBtnOpenNewPopoverDialog11.addEventListener('click', function () {
+	var wcNewPopoverDialog11 = document.querySelector('.wcNewPopoverDialog11');
+	wcNewPopoverDialog11.show();
+});

packages/main/test/specs/Dialog.spec.js

@@ -68,9 +68,39 @@ describe("Dialog general interaction", () => {
 		 */
 	});
 
-	it("draggable - mouse support", async () => {
+	it("dialog repositions after screen resize", async () => {
 		await browser.url(`http://localhost:${PORT}/test-resources/pages/Dialog.html`);
 
+		// Setup
+		const openDialogButton = await browser.$("#btnOpenDialogWithAttr");
+		await openDialogButton.click();
+
+		const dialog = await browser.$("#dlgAttr");
+		const topBeforeScreenResize = parseInt((await dialog.getCSSProperty("top")).value);
+		const leftBeforeScreenResize = parseInt((await dialog.getCSSProperty("left")).value);
+
+		const {
+			height: oldScreenHeight,
+			width: oldScreenWidth
+		} = await browser.getWindowSize();
+
+		// Act
+		await browser.setWindowSize(2000, 2000);
+
+		// Assert
+		const topAfterScreenResize = parseInt((await dialog.getCSSProperty("top")).value);
+		const leftAfterScreenResize = parseInt((await dialog.getCSSProperty("left")).value);
+
+		assert.notStrictEqual(topBeforeScreenResize, topAfterScreenResize, "dialog's top has changed after screen resize")
+		assert.notStrictEqual(leftBeforeScreenResize, leftAfterScreenResize, "dialog's left has changed after screen resize")
+
+		// Clean-up
+		await browser.keys("Escape");
+		await browser.setWindowSize(oldScreenWidth, oldScreenHeight);
+	});
+
+	it("draggable - mouse support", async () => {
+
 		// Setup
 		const openDraggableDialogButton = await browser.$("#draggable-open");
 		await openDraggableDialogButton.click();