fix(ui5-file-uploader): remove the cloning of the value state message (…

…#9915) The valueStateMessage slot content no longer needs to be cloned, as the ui5-popover is now integrated into the component’s shadow root through the new Popover API.
SAP · Sep 24, 2024 · a73dd60 · a73dd60
1 parent d594ae7
commit a73dd60
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
@@ -475,10 +475,6 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		return this.hasValueState && this.valueState !== ValueState.Positive;
 	}
 
-	get valueStateMessageText() {
-		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
-	}
-
 	get shouldDisplayDefaultValueStateMessage(): boolean {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}

diff --git a/packages/main/src/FileUploaderPopover.hbs b/packages/main/src/FileUploaderPopover.hbs
@@ -19,8 +19,6 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/test/pages/FileUploader.html b/packages/main/test/pages/FileUploader.html
@@ -36,7 +36,7 @@
 
 	<div>
 		<label>FileUploader with ValueState</label>
-		<ui5-file-uploader placeholder="upload file" value-state="Critical">
+		<ui5-file-uploader placeholder="upload file" value-state="Critical" id="fu-valuestate-test">
 			<ui5-button>Upload</ui5-button>
 		</ui5-file-uploader>
 

diff --git a/packages/main/test/specs/FileUploader.spec.js b/packages/main/test/specs/FileUploader.spec.js
@@ -48,4 +48,18 @@ describe("API", () => {
 
 		assert.notOk(await fileUploader.isFocused(), "Uploader isn't focusable");
 	});
+
+	it("Value state message of type 'Critical' is opened on focusing the File Uploader button", async () => {
+		await browser.url(`test/pages/FileUploader.html`);
+
+		const fileUploader = await browser.$("#fu-valuestate-test");
+		await browser.keys("Tab");
+		await browser.keys("Tab");
+		await browser.keys("Tab");
+
+		const valueState = await fileUploader.shadow$("ui5-popover");
+
+		assert.ok(await valueState.isExisting(), "Value state message exists.");
+		assert.ok(await valueState.getProperty("open"), "File Uploader in focus should have open value state message.");
+	});
 });