fix(ui5-popup): initialFocus won't work if 'autofocus' is set

packages/main/src/Popup.ts

@@ -123,6 +123,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
 	 */
@@ -438,6 +441,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) {

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>
 

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();
 	});
 });