fix(OpenUI5Support): fix closing popups with escape key

packages/base/src/features/OpenUI5Support.ts

@@ -6,7 +6,7 @@ import {
 	removeOpenedPopup,
 	getTopmostPopup,
 } from "./patchPopup.js";
-import type { OpenUI5Popup, PopupInfo } from "./patchPopup.js";
+import type { OpenUI5Popup, OpenUI5PopupControl, PopupInfo } from "./patchPopup.js";
 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
 import type { CLDRData } from "../asset-registries/LocaleData.js";
@@ -99,7 +99,7 @@ class OpenUI5Support {
 			OpenUI5Support.initPromise = new Promise<void>(resolve => {
 				window.sap.ui.require(["sap/ui/core/Core"], async (Core: OpenUI5Core) => {
 					const callback = () => {
-						let deps: Array<string> = ["sap/ui/core/Popup", "sap/ui/core/Patcher", "sap/ui/core/LocaleData"];
+						let deps: Array<string> = ["sap/ui/core/Popup", "sap/m/Dialog", "sap/m/Popover", "sap/ui/core/Patcher", "sap/ui/core/LocaleData"];
 						if (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core
 							deps = [
 								...deps,
@@ -110,9 +110,9 @@ class OpenUI5Support {
 								"sap/ui/core/date/CalendarUtils",
 							];
 						}
-						window.sap.ui.require(deps, (Popup: OpenUI5Popup, Patcher: OpenUI5Patcher) => {
+						window.sap.ui.require(deps, (Popup: OpenUI5Popup, Dialog: OpenUI5PopupControl, Popover: OpenUI5PopupControl, Patcher: OpenUI5Patcher) => {
 							patchPatcher(Patcher);
-							patchPopup(Popup);
+							patchPopup(Popup, Dialog, Popover);
 							resolve();
 						});
 					};

packages/base/src/features/patchPopup.ts

@@ -17,6 +17,13 @@ type OpenUI5Popup = {
 	}
 };
 
+type OpenUI5PopupControl = {
+	prototype: {
+		onsapescape: (e: Event) => void,
+		oPopup: OpenUI5Popup,
+	}
+};
+
 type PopupInfo = {
 	type: "OpenUI5" | "WebComponent";
 	instance: object;
@@ -41,25 +48,24 @@ const getTopmostPopup = () => {
 };
 
 /**
- * Original OpenUI5 popup focus event is triggered only
- * if there are no Web Component popups opened on top of it.
+ * Checks if Web Component popups opened on top of it.
  *
- * @param {object} popup - The popup instance to check.
- * @returns {boolean} True if the focus event should be triggered, false otherwise.
+ * @param {object} popup The popup instance to check against.
+ * @returns {boolean} `true` if a Web Component popup is stacked above; otherwise `false`.
  */
-const shouldCallOpenUI5FocusEvent = (popup: object) => {
+const hasWebComponentPopupAbove = (popup: object) => {
 	for (let i = AllOpenedPopupsRegistry.openedRegistry.length - 1; i >= 0; i--) {
 		const popupInfo = AllOpenedPopupsRegistry.openedRegistry[i];
-		if (popupInfo.type !== "OpenUI5") {
-			return false;
+		if (popupInfo.type === "WebComponent") {
+			return true;
 		}
 
 		if (popupInfo.instance === popup) {
 			break;
 		}
 	}
 
-	return true;
+	return false;
 };
 
 const openNativePopover = (domRef: HTMLElement) => {
@@ -85,6 +91,17 @@ const isNativePopoverOpen = (root: Document | ShadowRoot = document): boolean =>
 	});
 };
 
+const patchPopupControl = (PopupControl: OpenUI5PopupControl) => {
+	const origOnsapescape = PopupControl.prototype.onsapescape;
+	PopupControl.prototype.onsapescape = function onsapescape(e: Event) {
+		if (hasWebComponentPopupAbove(this.oPopup)) {
+			return;
+		}
+
+		origOnsapescape.call(this, e);
+	};
+};
+
 const patchOpen = (Popup: OpenUI5Popup) => {
 	const origOpen = Popup.prototype.open;
 	Popup.prototype.open = function open(...args: any[]) {
@@ -125,7 +142,7 @@ const patchClosed = (Popup: OpenUI5Popup) => {
 const patchFocusEvent = (Popup: OpenUI5Popup) => {
 	const origFocusEvent = Popup.prototype.onFocusEvent;
 	Popup.prototype.onFocusEvent = function onFocusEvent(e: FocusEvent) {
-		if (shouldCallOpenUI5FocusEvent(this)) {
+		if (!hasWebComponentPopupAbove(this)) {
 			origFocusEvent.call(this, e);
 		}
 	};
@@ -137,12 +154,14 @@ const createGlobalStyles = () => {
 	document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
 };
 
-const patchPopup = (Popup: OpenUI5Popup) => {
+const patchPopup = (Popup: OpenUI5Popup, Dialog: OpenUI5PopupControl, Popover: OpenUI5PopupControl) => {
 	insertOpenUI5PopupStyles();
 	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
+	patchPopupControl(Dialog); // Dialog.prototype.onsapescape
+	patchPopupControl(Popover); // Popover.prototype.onsapescape
 };
 
 export {
@@ -152,4 +171,4 @@ export {
 	getTopmostPopup,
 };
 
-export type { OpenUI5Popup, PopupInfo };
+export type { OpenUI5Popup, OpenUI5PopupControl, PopupInfo };

packages/base/src/util/openui5support/eventMarking.ts

@@ -0,0 +1,7 @@
+const defaultKey = "handledByControl";
+
+const isMarked = (event: any, key: string = defaultKey) => {
+	return !!event[`_sapui_${key}`];
+};
+
+export default isMarked;