fix(ui5-combobox): remove the cloning of the value state message (#9384)

* fix(ui5-combobox): remove the cloning of the value state message related to #9347
SAP · Jul 16, 2024 · a24c6b7 · a24c6b7
1 parent 2ea26ca
commit a24c6b7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -522,7 +522,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		this._fireChangeEvent();
 
 		const focusedOutToItemsPicker = this.open && this._getPicker().contains(toBeFocused);
-		const focusedOutToValueState = this.valueStateOpen && this._getValueStatePopover().contains(toBeFocused);
+		const focusedOutToValueState = this.valueStateOpen && this.contains(toBeFocused);
 
 		if (focusedOutToItemsPicker || focusedOutToValueState) {
 			e.stopImmediatePropagation();
@@ -1221,7 +1221,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_announceValueStateText() {
-		const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" ");
+		const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessage.map(el => el.textContent).join(" ");
 
 		if (valueStateText) {
 			announce(valueStateText, InvisibleMessageMode.Polite);
@@ -1277,7 +1277,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			return `${text} ${this.valueStateDefaultText || ""}`;
 		}
 
-		return `${text}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+		return `${text}`.concat(" ", this.valueStateMessage.map(el => el.textContent).join(" "));
 	}
 
 	get valueStateDefaultText(): string | undefined {
@@ -1288,10 +1288,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
-	get valueStateMessageText(): Array<Node> {
-		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
-	}
-
 	get valueStateTextMappings(): ValueStateAnnouncement {
 		return {
 			[ValueState.Positive]: ComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS),

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -55,7 +55,9 @@
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{#if open}}
 					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 	{{/if}}
@@ -64,7 +66,9 @@
 		{{#if hasValueStateText}}
 			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} style="{{styles.suggestionPopoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{#if open}}
 					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 	{{/unless}}
@@ -132,9 +136,7 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateDefaultText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
 

diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
@@ -264,7 +264,7 @@ describe("General interaction", () => {
 
 		// click on first item
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		const link = await popover.$(".ui5-responsive-popover-header.ui5-valuestatemessage-root a");
+		const link = await combo.$("div[slot='valueStateMessage'] a");
 
 		await link.click();
 
@@ -912,8 +912,7 @@ describe("Accessibility", async () => {
 		await cbError.click();
 		await cbError.keys("a");
 
-		const popoverHeader = await cbError.shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
-		const valueStateText = await popoverHeader.$("div").getHTML(false);
+		const valueStateText = await cbError.$("div[slot='valueStateMessage']").getHTML(false);
 		const ariaHiddenText = await cbError.shadow$(`#value-state-description`).getHTML(false);
 
 		assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
@@ -1332,7 +1331,7 @@ describe("Keyboard navigation", async () => {
 
 		const valueState = await comboBox.shadow$("ui5-popover");
 
-		await valueState.$("a").click();
+		await comboBox.$("div[slot='valueStateMessage'] a").click();
 		await comboBox.keys("Tab");
 
 		assert.notOk(await valueState.isExisting(), "Value state message is closed.");