fix(ui5-dialog): fix focusing when dialog is open from OpenUI5 dialog (…

…#9204) Part of #9028 Downport of #9183
SAP · Jun 20, 2024 · e2a19fa · e2a19fa
1 parent ef06287
commit e2a19fa
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 5 deletions.
diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts
@@ -3,11 +3,8 @@ import { setTheme } from "../config/Theme.js";
 import { getCurrentZIndex } from "../util/PopupUtils.js";
 import { CLDRData } from "../asset-registries/LocaleData.js";
 import type { LegacyDateCalendarCustomizing } from "../features/LegacyDateFormats.js";
-
-type OpenUI5Popup = {
-	setInitialZIndex: (zIndex: number) => void,
-	getNextZIndex: () => number,
-};
+import patchPopup from "./patchPopup.js";
+import type { OpenUI5Popup } from "./patchPopup.js";
 
 type OpenUI5Core = {
 	attachInit: (callback: () => void) => void,
@@ -103,6 +100,7 @@ class OpenUI5Support {
 					}
 					window.sap.ui.require(deps, (Popup: OpenUI5Popup) => {
 						Popup.setInitialZIndex(getCurrentZIndex());
+						patchPopup(Popup);
 						resolve();
 					});
 				};

diff --git a/packages/base/src/features/patchPopup.ts b/packages/base/src/features/patchPopup.ts
@@ -0,0 +1,25 @@
+type OpenUI5Popup = {
+	setInitialZIndex: (zIndex: number) => void,
+	getNextZIndex: () => number,
+	prototype: {
+		onFocusEvent: (e: FocusEvent) => void,
+	}
+};
+
+const patchFocusEvent = (Popup: OpenUI5Popup) => {
+	const origFocusEvent = Popup.prototype.onFocusEvent;
+	Popup.prototype.onFocusEvent = function onFocusEvent(e: FocusEvent) {
+		const isTypeFocus = e.type === "focus" || e.type === "activate";
+		const target = e.target as HTMLElement;
+		if (!isTypeFocus || !target.closest("[ui5-popover],[ui5-responsive-popover],[ui5-dialog]")) {
+			origFocusEvent.call(this, e);
+		}
+	};
+};
+
+const patchPopup = (Popup: OpenUI5Popup) => {
+	patchFocusEvent(Popup);// Popup.prototype.onFocusEvent
+};
+
+export default patchPopup;
+export type { OpenUI5Popup };
diff --git a/packages/main/test/pages/DialogAndOpenUI5Dialog.html b/packages/main/test/pages/DialogAndOpenUI5Dialog.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Dialog</title>
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+	<script>
+		// delete Document.prototype.adoptedStyleSheets
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
+			id="sap-ui-bootstrap"
+			data-sap-ui-libs="sap.m"
+			data-sap-ui-oninit="onOpenUI5Init"
+			data-sap-ui-compatVersion="edge"></script>
+	<script>
+		function onOpenUI5Init() {
+			sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
+				new Button("openUI5Button", {
+					text: "Open OpenUI5 Dialog",
+					press: function () {
+						new Dialog({
+							title: "OpenUI5 Dialog",
+							content: [
+								new Button({
+									text: "Focus stop"
+								}),
+								new Button("openResPopoverButton", {
+									text: "Open WebC Responsive Popover",
+									press: function () {
+										document.getElementById("respPopover").open = true;
+									}
+								})
+							],
+							afterClose: function () {
+								this.destroy();
+							}
+						}).open();
+					}
+				}).placeAt("content");
+			});
+		}
+
+		function init() {
+			document.getElementById("myButton").addEventListener("click", function() {
+				document.getElementById("dialog1").open = true;
+			});
+
+			document.getElementById("dialogButton").addEventListener("click", function () {
+				sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
+					new Dialog({
+						title: "OpenUI5 Dialog",
+						content: [
+							new Button({
+								text: "Focus stop"
+							}),
+							new Button("openUI5DialogButton", {
+								text: "Open WebC Dialog",
+								press: function () {
+									document.getElementById("newDialog1").open = true;
+								}
+							})
+						],
+						afterClose: function () {
+							this.destroy();
+						}
+					}).open();
+				});
+			});
+		}
+	</script>
+</head>
+<body class="sapUiBody" onload="init()">
+<div id="buttonP">
+	<ui5-button id="myButton">Open WebC Dialog</ui5-button>
+</div>
+<ui5-dialog id="dialog1" header-text="This is an WebC Dialog 1">
+	<ui5-button id="dialogButton">Open UI5 dialog</ui5-button>
+</ui5-dialog>
+<ui5-dialog id="newDialog1" header-text="This is an WebC Dialog 2">
+	<ui5-button id="someButton">Some button</ui5-button>
+</ui5-dialog>
+<div id="content"></div>
+<ui5-responsive-popover id="respPopover"
+						opener="openResPopoverButton"
+						header-text="This is an WebC Responsive Popover">
+	<ui5-button>Some button</ui5-button>
+</ui5-responsive-popover>
+</body>
+</html>