fix(ui5-file-uploader): apply focus properly from inside of a popover (…

…#9162) Fixes: #9090
SAP · Jun 17, 2024 · 2283e9e · 2283e9e
1 parent 3b049c8
commit 2283e9e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
@@ -201,6 +201,13 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		return this.getFocusDomRefAsync();
 	}
 
+	/**
+	 * @override
+	 */
+	getFocusDomRef(): HTMLElement | undefined {
+		return this.content[0];
+	}
+
 	get formFormattedValue() {
 		if (this.files) {
 			const formData = new FormData();

diff --git a/packages/main/test/pages/FileUploader.html b/packages/main/test/pages/FileUploader.html
@@ -14,8 +14,21 @@
 	</script>
 </head>
 <body>
+
+	<div>
+		<ui5-button id="open-dialog-btn">open</ui5-button>
+		<ui5-dialog id="dialog" opener="open-dialog-btn" header-text="Upload file">
+			<ui5-file-uploader>
+				<ui5-button>Upload</ui5-button>
+			</ui5-file-uploader>
+			<div slot="footer" class="dialogFooter">
+				<ui5-button design="Emphasized">Close</ui5-button>
+			</div>
+		</ui5-dialog>
+	</div>
+
 	<div>
-		<label>Single file upload:</label>
+		<ui5-label>Single file upload:</label>
 		<ui5-file-uploader placeholder="upload file">
 			<ui5-button>Upload</ui5-button>
 		</ui5-file-uploader>
@@ -112,6 +125,12 @@
 		</div>
 	</div>
 	<script>
+
+		const dialog = document.getElementById("dialog");
+		document.getElementById("open-dialog-btn").addEventListener("click", function() {
+			dialog.open = !dialog.open;
+		});
+
 		document.getElementById("uploadBtn").addEventListener("click", function() {
 			var fu = document.getElementById("fuFetch");
 			var data = new FormData();

diff --git a/packages/main/test/specs/FileUploader.spec.js b/packages/main/test/specs/FileUploader.spec.js
@@ -33,4 +33,14 @@ describe("API", () => {
 		const input = await fileUploader.shadow$("input");
 		assert.strictEqual(await input.getProperty("accept"), ".txt,.docx", "Native input is has the rignt accept property.");
 	});
+
+	it("Input not focusable", async () => {
+		const openDialogButton = await browser.$("#open-dialog-btn");
+
+		await openDialogButton.click();
+		const dialog = await browser.$("#dialog");
+		const fileUploader = await dialog.$("ui5-file-uploader");
+
+		assert.notOk(await fileUploader.isFocused(), "Uploader isn't focusable");
+	});
 });