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}}
- {{> valueStateMessage}} + {{#if open}} + {{> valueStateMessage}} + {{/if}}
{{/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");