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

…#9183) fix(ui5-dialog): fix focusing when dialog is open from OpenUI5 dialog
SAP · Jun 17, 2024 · e09be96 · e09be96
1 parent d618290
commit e09be96
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 0 deletions.
diff --git a/packages/base/src/features/patchPopup.ts b/packages/base/src/features/patchPopup.ts
@@ -10,6 +10,7 @@ type OpenUI5Popup = {
 		_closed: (...args: any[]) => void,
 		getOpenState: () => "CLOSED" | "CLOSING" | "OPEN" | "OPENING",
 		getContent: () => Element, // this is the OpenUI5 Element/Control instance that opens the Popup (usually sap.m.Popover/sap.m.Dialog)
+		onFocusEvent: (e: FocusEvent) => void,
 	}
 };
 
@@ -55,6 +56,17 @@ const patchClosed = (Popup: OpenUI5Popup) => {
 	};
 };
 
+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 createGlobalStyles = () => {
 	const stylesheet = new CSSStyleSheet();
 	stylesheet.replaceSync(`.sapMPopup-CTX:popover-open { inset: unset; }`);
@@ -65,6 +77,7 @@ const patchPopup = (Popup: OpenUI5Popup) => {
 	patchOpen(Popup); // Popup.prototype.open
 	patchClosed(Popup); // Popup.prototype._closed
 	createGlobalStyles(); // Ensures correct popover positioning by OpenUI5 (otherwise 0,0 is the center of the screen)
+	patchFocusEvent(Popup);// Popup.prototype.onFocusEvent
 };
 
 export default patchPopup;

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>