fix(ui5-dialog): reposition on screen resize

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();