diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 9ada9efca5d0..b9e4b03f44c1 100644 --- 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 { - 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 index 79aa2408e614..2c5419b98fd8 100644 --- a/packages/main/src/ComboBoxPopover.hbs +++ b/packages/main/src/ComboBoxPopover.hbs @@ -55,7 +55,9 @@ {{#if hasValueStateText}}
+ {{#if open}} {{> valueStateMessage}} + {{/if}}
{{/if}} {{/if}} @@ -64,7 +66,9 @@ {{#if hasValueStateText}}
+ {{#if open}} {{> valueStateMessage}} + {{/if}}
{{/if}} {{/unless}} @@ -132,9 +136,7 @@ {{#if shouldDisplayDefaultValueStateMessage}} {{valueStateDefaultText}} {{else}} - {{#each valueStateMessageText}} - {{this}} - {{/each}} + {{/if}} {{/inline}} diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js index f30b50f3f1c1..fbaa33e7ff1b 100644 --- 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.");