diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index b6b49b4d2546..d3db25dc016e 100644
--- 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
index 13d519205d4d..7ef465a4d3af 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -53,7 +53,9 @@
{{#if hasValueStateMessage}}
- {{> valueStateMessage}}
+ {{#if open}}
+ {{> valueStateMessage}}
+ {{/if}}
{{/if}}
@@ -64,7 +66,9 @@
{{#if hasValueStateMessage}}
{{/if}}
@@ -130,7 +134,9 @@
>
- {{> valueStateMessage}}
+ {{#if valueStateOpen}}
+ {{> valueStateMessage}}
+ {{/if}}
{{/if}}
@@ -139,9 +145,7 @@
{{#if shouldDisplayDefaultValueStateMessage}}
{{valueStateDefaultText}}
{{else}}
- {{#each valueStateMessageText}}
- {{this}}
- {{/each}}
+
{{/if}}
{{/inline}}
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
index e81c314d7b7f..1989043dfc7a 100644
--- 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");