fix(OpenUI5Support): fix sap.m.Select inside a ui5-dialog (#11939)

* fix(OpenUI5Support): fix sap.m.Select inside a ui5-dialog

Author: TeodorTaushanov

packages/base/src/features/OpenUI5Support.ts

@@ -1,6 +1,11 @@
 import patchPatcher from "./patchPatcher.js";
 import type { OpenUI5Patcher } from "./patchPatcher.js";
-import patchPopup from "./patchPopup.js";
+import {
+	patchPopup,
+	addOpenedPopup,
+	removeOpenedPopup,
+	getTopmostPopup,
+} from "./patchPopup.js";
 import type { OpenUI5Popup } from "./patchPopup.js";
 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
@@ -223,6 +228,18 @@ class OpenUI5Support {
 
 		return !!link.href.match(/\/css(-|_)variables\.css/);
 	}
+
+	static addOpenedPopup(popup: object) {
+		addOpenedPopup(popup);
+	}
+
+	static removeOpenedPopup(popup: object) {
+		removeOpenedPopup(popup);
+	}
+
+	static getTopmostPopup() {
+		return getTopmostPopup();
+	}
 }
 
 registerFeature("OpenUI5Support", OpenUI5Support);

packages/base/src/features/patchPopup.ts

@@ -1,4 +1,6 @@
 // OpenUI5's Control.js subset
+import getSharedResource from "../getSharedResource.js";
+
 type Control = {
 	getDomRef: () => HTMLElement | null,
 }
@@ -14,6 +16,24 @@ type OpenUI5Popup = {
 	}
 };
 
+// contains all OpenUI5 and Web Component popups that are currently opened
+const AllOpenedPopupsRegistry = getSharedResource<{ openedRegistry: Array<object> }>("AllOpenedPopupsRegistry", { openedRegistry: [] });
+
+const addOpenedPopup = (popup: object) => {
+	AllOpenedPopupsRegistry.openedRegistry.push(popup);
+};
+
+const removeOpenedPopup = (popup: object) => {
+	const index = AllOpenedPopupsRegistry.openedRegistry.indexOf(popup);
+	if (index > -1) {
+		AllOpenedPopupsRegistry.openedRegistry.splice(index, 1);
+	}
+};
+
+const getTopmostPopup = () => {
+	return AllOpenedPopupsRegistry.openedRegistry[AllOpenedPopupsRegistry.openedRegistry.length - 1];
+};
+
 const openNativePopover = (domRef: HTMLElement) => {
 	domRef.setAttribute("popover", "manual");
 	domRef.showPopover();
@@ -52,6 +72,8 @@ const patchOpen = (Popup: OpenUI5Popup) => {
 				}
 			}
 		}
+
+		addOpenedPopup(this);
 	};
 };
 
@@ -64,15 +86,17 @@ const patchClosed = (Popup: OpenUI5Popup) => {
 		if (domRef) {
 			closeNativePopover(domRef); // unset the popover attribute and close the native popover, but only if still in DOM
 		}
+
+		removeOpenedPopup(this);
 	};
 };
 
 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]")) {
+		// If the popup is the topmost one, we call the original focus event handler from the OpenUI5 Popup,
+		// otherwise the focus event is handled by the Web Component Popup.
+		if (this === getTopmostPopup()) {
 			origFocusEvent.call(this, e);
 		}
 	};
@@ -91,5 +115,11 @@ const patchPopup = (Popup: OpenUI5Popup) => {
 	patchFocusEvent(Popup);// Popup.prototype.onFocusEvent
 };
 
-export default patchPopup;
+export {
+	patchPopup,
+	addOpenedPopup,
+	removeOpenedPopup,
+	getTopmostPopup,
+};
+
 export type { OpenUI5Popup };

packages/main/src/popup-utils/OpenedPopupsRegistry.ts

@@ -1,5 +1,7 @@
 import getSharedResource from "@ui5/webcomponents-base/dist/getSharedResource.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import type OpenUI5Support from "@ui5/webcomponents-base/dist/features/OpenUI5Support.js";
 import type Popup from "../Popup.js";
 
 type RegisteredPopup = {
@@ -8,13 +10,24 @@ type RegisteredPopup = {
 }
 
 const OpenedPopupsRegistry = getSharedResource<{ openedRegistry: Array<RegisteredPopup> }>("OpenedPopupsRegistry", { openedRegistry: [] });
+const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
+
+function registerPopupWithOpenUI5Support(popup: object) {
+	openUI5Support?.addOpenedPopup(popup);
+}
+
+function unregisterPopupWithOpenUI5Support(popup: object) {
+	openUI5Support?.removeOpenedPopup(popup);
+}
 
 const addOpenedPopup = (instance: Popup, parentPopovers: Array<Popup> = []) => {
 	if (!OpenedPopupsRegistry.openedRegistry.some(popup => popup.instance === instance)) {
 		OpenedPopupsRegistry.openedRegistry.push({
 			instance,
 			parentPopovers,
 		});
+
+		registerPopupWithOpenUI5Support(instance);
 	}
 
 	_updateTopModalPopup();
@@ -29,6 +42,8 @@ const removeOpenedPopup = (instance: Popup) => {
 		return el.instance !== instance;
 	});
 
+	unregisterPopupWithOpenUI5Support(instance);
+
 	_updateTopModalPopup();
 
 	if (!OpenedPopupsRegistry.openedRegistry.length) {
@@ -46,8 +61,14 @@ const _keydownListener = (event: KeyboardEvent) => {
 	}
 
 	if (isEscape(event)) {
+		const topmostPopup = OpenedPopupsRegistry.openedRegistry[OpenedPopupsRegistry.openedRegistry.length - 1].instance;
+
+		if (openUI5Support && topmostPopup !== openUI5Support.getTopmostPopup()) {
+			return;
+		}
+
 		event.stopPropagation();
-		OpenedPopupsRegistry.openedRegistry[OpenedPopupsRegistry.openedRegistry.length - 1].instance.closePopup(true);
+		topmostPopup.closePopup(true);
 	}
 };
 

packages/main/test/pages/DialogAndOpenUI5Dialog.html

@@ -52,6 +52,19 @@
 				document.getElementById("dialog1").open = true;
 			});
 
+			sap.ui.require(["sap/m/Select", "sap/ui/core/Item"], (Select, Item) => {
+				new Select({
+					items: [
+						new Item({ text: "Item 1" }),
+						new Item({ text: "Item 2" }),
+						new Item({ text: "Item 3" })
+					],
+					change: function (oEvent) {
+						console.error("Selected item:", oEvent.getParameter("selectedItem").getText());
+					}
+				}).placeAt("dilog1content");
+			});
+
 			document.getElementById("dialogButton").addEventListener("click", function () {
 				sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
 					new Dialog({
@@ -81,6 +94,7 @@
 		<ui5-button id="myButton">Open WebC Dialog</ui5-button>
 	</div>
 	<ui5-dialog id="dialog1" header-text="This is an WebC Dialog 1">
+		<div id="dilog1content"></div>
 		<ui5-button id="dialogButton">Open UI5 dialog</ui5-button>
 	</ui5-dialog>
 	<ui5-dialog id="newDialog1" header-text="This is an WebC Dialog 2">