wip(ui5-input | textarea): support autofocus attribute

packages/main/cypress/specs/Input.cy.tsx

@@ -1284,6 +1284,13 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 });
 
 describe("Accessibility", () => {
+	it("tests autofocus attribute", () => {
+		cy.mount(<Input autofocus />);
+
+		cy.get("[ui5-input]")
+			.should("be.focused");
+	});
+
 	it("tests accessibleDescription property", () => {
 		cy.mount(<Input accessibleDescription="This is an input" />);
 

packages/main/src/Input.ts

@@ -214,6 +214,7 @@ type InputSuggestionScrollEventDetail = {
 		ValueStateMessageCss,
 		SuggestionsCss,
 	],
+	shadowRootOptions: { delegatesFocus: true },
 })
 
 /**
@@ -720,6 +721,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		ResizeHandler.register(this, this._handleResizeBound);
 		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
 		this._enableComposition();
+		if (this.hasAttribute("autofocus")) {
+			this.focus();
+		}
 	}
 
 	onExitDOM() {

packages/main/src/Popup.ts

@@ -504,13 +504,18 @@ 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]")) {
+		await this._waitForDomRef();
+
+		const elementWithAutoFocus = this.querySelector("[autofocus]");
+		if (elementWithAutoFocus) {
+			// If the "autofocus" is set on UI5Element, focus it manually.
+			if ("isUI5Element" in elementWithAutoFocus) {
+				(elementWithAutoFocus as UI5Element).focus();
+			}
+			// Otherwise, the browser will focus it automatically.
 			return;
 		}
 
-		await this._waitForDomRef();
-
 		if (this.getRootNode() === this) {
 			return;
 		}

packages/main/src/TextArea.ts

@@ -83,6 +83,7 @@ type TextAreaInputEventDetail = {
 	],
 	renderer: jsxRenderer,
 	template: TextAreaTemplate,
+	shadowRootOptions: { delegatesFocus: true },
 })
 /**
  * Fired when the text has changed and the focus leaves the component.
@@ -377,6 +378,9 @@ class TextArea extends UI5Element implements IFormInputElement {
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._fnOnResize);
+		if (this.hasAttribute("autofocus")) {
+			this.focus();
+		}
 	}
 
 	onExitDOM() {

packages/main/test/pages/Dialog.html

@@ -103,6 +103,7 @@
 		<div slot="footer" class="dialogFooter">
 			<ui5-button design="Emphasized" id="btnCloseDialogWithInput">Close</ui5-button>
 		</div>
+		<ui5-input autofocus placeholder="Input with autofocus"></ui5-input>
 	</ui5-dialog>
 
 	<ui5-dialog id="msg-dialog" header-text="Message dialog" class="dialog1auto">

packages/main/test/pages/Input.html

@@ -22,6 +22,9 @@ <h3> Input with suggestions: type 'a'</h3>
 	<ui5-label id="myLabelSelectionChange">Event [selectionChange] :: N/A</ui5-label><br />
 
 	<div>
+		<h3>Input with autofocus</h3>
+		<ui5-input autofocus placeholder="Input with autofocus"></ui5-input>
+
 		<h3>Input in Cozy</h3>
 		<ui5-input id="myInput" class="input2auto" show-suggestions placeholder="Search for a country ...">
 		</ui5-input>

packages/main/test/pages/Popover.html

@@ -96,6 +96,13 @@
 		<ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
 	</ui5-popover>
 
+	<ui5-button id="btnOpenWithAttr2">Open with Attribute</ui5-button>
+	<ui5-popover id="popoverAttr2" opener="btnOpenWithAttr2">
+		<ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
+		<ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
+		<ui5-input autofocus placeholder="Input with autofocus"></ui5-input>
+	</ui5-popover>
+
 	<br>
 	<br>
 
@@ -666,6 +673,9 @@ <h3>Popover in ShadowRoot, Opener set as ID in window.document</h3>
 		btnOpenWithAttr.addEventListener("click", function () {
 			popoverAttr.setAttribute("open", "");
 		});
+		btnOpenWithAttr2.addEventListener("click", function () {
+			popoverAttr2.setAttribute("open", "");
+		});
 
 		btnCloseWithMethod.addEventListener("click", function () {
 			popoverAttr.open = false;