From 2c9f7757c9378732c1231651bdc8a39004a22a60 Mon Sep 17 00:00:00 2001
From: TeodorTaushanov <teodor.taushanov@sap.com>
Date: Wed, 5 Jun 2024 16:12:38 +0300
Subject: [PATCH] fix(ui5-popup): initialFocus won't work if 'autofocus' is set
 (#8956)

* fix(ui5-popup): initialFocus won't work if 'autofocus' is set
---
 packages/main/src/Popup.ts              |  8 ++++++++
 packages/main/test/pages/Dialog.html    | 16 ++++++++++++++++
 packages/main/test/specs/Dialog.spec.js | 13 +++++++++++++
 3 files changed, 37 insertions(+)

diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index 8209f07277e1..0f313df9fceb 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -127,6 +127,9 @@ type PopupBeforeCloseEventDetail = {
 abstract class Popup extends UI5Element {
 	/**
 	 * Defines the ID of the HTML Element, which will get the initial focus.
+	 *
+	 * **Note:** If an element with `autofocus` attribute is added inside the component,
+	 * `initialFocus` won't take effect.
 	 * @default ""
 	 * @public
 	 */
@@ -453,6 +456,11 @@ abstract class Popup extends UI5Element {
 	 * @returns Promise that resolves when the focus is applied
 	 */
 	async applyFocus(): Promise<void> {
+		// do nothing if the standard HTML autofocus is used
+		if (this.querySelector("[autofocus]")) {
+			return;
+		}
+
 		await this._waitForDomRef();
 
 		if (this.getRootNode() === this) {
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
index 6aa6cdf8469a..eb614166ac39 100644
--- a/packages/main/test/pages/Dialog.html
+++ b/packages/main/test/pages/Dialog.html
@@ -600,6 +600,14 @@
 	</ui5-dialog>
 	<br>
 	<br>
+	<ui5-button id="btnDialogAutofocus">Dialog with autofocus</ui5-button>
+	<ui5-dialog header-text="Dialog" id="dialogAutofocus">
+		Some Dialog
+		<input />
+		<ui5-button autofocus id="btnDialogAutofocusClose">Close</ui5-button>
+	</ui5-dialog>
+	<br>
+	<br>
 	<div>
 		<ui5-title level="H3">Open Dialog from list</ui5-title>
 		<ui5-list id="listContainerId" selection-mode="Single">
@@ -839,6 +847,14 @@
 			window["dialogFocus1"].open = false;
 		});
 
+		window["btnDialogAutofocus"].addEventListener("click", function () {
+			window["dialogAutofocus"].open = true;
+		});
+
+		window["btnDialogAutofocusClose"].addEventListener("click", function () {
+			window["dialogAutofocus"].open = false;
+		});
+
 	</script>
 </body>
 
diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js
index 4f655db79cf6..32717f1a3f24 100644
--- a/packages/main/test/specs/Dialog.spec.js
+++ b/packages/main/test/specs/Dialog.spec.js
@@ -370,6 +370,19 @@ describe("Dialog general interaction", () => {
 		assert.strictEqual(await firstActiveBtn.isFocused(), true, "Correct element is focused");
 		await browser.keys(["Shift", "Tab"]);
 		assert.strictEqual(await secondActiveBtn.isFocused(), true, "Correct element is focused");
+
+		await browser.keys("Escape");
+	});
+
+	it("initial focus with autofocus", async () => {
+		const openDialogAutofocus = await browser.$("#btnDialogAutofocus");
+		await openDialogAutofocus.scrollIntoView();
+		await openDialogAutofocus.click();
+
+		const closeButton = await browser.$("#btnDialogAutofocusClose");
+
+		assert.ok(closeButton.isFocused(), "initial focus is correct");
+		await closeButton.click();
 	});
 });