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

#9391) * fix(ui5-multi-combobox): remove the cloning of the value state message related to: #9347
SAP · Jul 5, 2024 · 68ea4af · 68ea4af
1 parent 9b383e2
commit 68ea4af
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -1775,7 +1775,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		const responsivePopover = this._getResponsivePopover();
 		const popover = this._getPopover();
 		const focusIsGoingInPopover = [responsivePopover, popover].some(popup => popup?.contains(e.relatedTarget as Node));
-		const focusIsGoingInValueStatePopup = popover?.contains(e.relatedTarget as Node);
+		const focusIsGoingInValueStatePopup = this?.contains(e.relatedTarget as Node);
 
 		if (focusIsGoingInValueStatePopup) {
 			e.stopImmediatePropagation();
@@ -1838,7 +1838,7 @@ class MultiComboBox 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 {
@@ -1859,10 +1859,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		return this.hasValueState ? `ui5-multi-combobox-valueStateDesc` : undefined;
 	}
 
-	get valueStateMessageText() {
-		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
-	}
-
 	get ariaLabelText() {
 		return getEffectiveAriaLabelText(this);
 	}

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -53,7 +53,9 @@
 		{{#if hasValueStateMessage}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+				{{#if open}}
+					{{> valueStateMessage}}
+				{{/if}}
 			</div>
 		{{/if}}
 
@@ -64,7 +66,9 @@
 		{{#if hasValueStateMessage}}
 			<div slot="header" @keydown="{{_onListHeaderKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
+				{{#if open}}
+					{{> valueStateMessage}}
+				{{/if}}			
 			</div>
 		{{/if}}
 
@@ -130,7 +134,9 @@
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-			{{> valueStateMessage}}
+			{{#if valueStateOpen}}
+				{{> valueStateMessage}}
+			{{/if}}
 		</div>
 	</ui5-popover>
 {{/if}}
@@ -139,9 +145,7 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateDefaultText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}
 

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1714,19 +1714,21 @@ describe("MultiComboBox general interaction", () => {
 			const mCbWarning = await browser.$("#mcb-warning");
 			const mCbSuccess = await browser.$("#mcb-success");
 			const mCbError = await browser.$("#mcb-error");
+			let input = await mCbWarning.shadow$("#ui5-multi-combobox-input");
 
-			let popover = await mCbWarning.shadow$("ui5-popover");
-
-			await mCbWarning.click();
+			await input.click();
 
+			let popover = await mCbWarning.shadow$("ui5-popover");
 			let ariaHiddenText = await mCbWarning.shadow$(`#ui5-multi-combobox-valueStateDesc`).getHTML(false);
 			let valueStateText = await popover.$("div").getHTML(false);
 
 			assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
 			assert.strictEqual(valueStateText.includes("Warning issued"), true, "Displayed value state message text is correct");
 
+			input = await mCbError.shadow$("#ui5-multi-combobox-input");
+
 			await mCbWarning.keys("Escape");
-			await mCbError.click();
+			await input.click();
 
 			popover = await mCbError.shadow$("ui5-popover");
 
@@ -1750,8 +1752,7 @@ describe("MultiComboBox general interaction", () => {
 			await mCbInformation.click();
 			await mCbInformation.keys("a");
 
-			const popoverHeader = await mCbInformation.shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
-			const valueStateText = await popoverHeader.$("div").getHTML(false);
+			const valueStateText = await mCbInformation.$("div[slot='valueStateMessage']").getHTML(false);
 			const ariaHiddenText = await mCbInformation.shadow$(`#ui5-multi-combobox-valueStateDesc`).getHTML(false);
 
 			assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");