diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 87b7f0b74a22..c3aab574d6e9 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -662,6 +662,12 @@ class MultiComboBox extends UI5Element { } } + _onPopoverFocusOut() { + if (!isPhone()) { + this._tokenizer.expanded = this.open; + } + } + _tokenizerFocusOut(e: FocusEvent) { this._tokenizerFocused = false; @@ -1444,7 +1450,7 @@ class MultiComboBox extends UI5Element { } this._toggle(); - + this._tokenizer.expanded = this.focused; this._iconPressed = false; this._preventTokenizerToggle = false; this.filterSelected = false; diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs index ef7b01a77779..0ecf7775175a 100644 --- a/packages/main/src/MultiComboBoxPopover.hbs +++ b/packages/main/src/MultiComboBoxPopover.hbs @@ -9,6 +9,7 @@ @ui5-after-close={{_afterClosePicker}} @ui5-before-open={{_beforeOpen}} @ui5-after-open={{_afterOpenPicker}} + @focusout={{_onPopoverFocusOut}} > {{#if _isPhone}}
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index 5833737ac1f2..6af8c241f603 100644 --- a/packages/main/test/specs/MultiComboBox.spec.js +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -114,6 +114,33 @@ describe("MultiComboBox general interaction", () => { assert.ok(inlinedTokens.length > 0, "Token is displayed"); }); + + it("should collapse the tokenizer when the n-more popover is closed", async () => { + const mcb = await browser.$("#mcb-select-all-vs"); + const arrow = await mcb.shadow$("ui5-icon"); + const tokenizer = await mcb.shadow$("ui5-tokenizer"); + const body = await browser.$(".multicombobox1auto"); + const nMoreText = await tokenizer.shadow$(".ui5-tokenizer-more-text"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-select-all-vs"); + const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + const firstItemCheckbox = await popover.$("ui5-list > ui5-li").shadow$("ui5-checkbox"); + + await arrow.click(); + await browser.keys("ArrowDown"); + await browser.keys("ArrowDown"); + + // select all items + await browser.keys("Space"); + + assert.ok(await tokenizer.getProperty("expanded"), "The tokenizer is expanded"); + + await body.click(); + await nMoreText.click(); + await firstItemCheckbox.click(); + await body.click(); + + assert.notOk(await tokenizer.getProperty("expanded"), "The tokenizer is collapsed"); + }); }); describe("selection and filtering", () => { @@ -419,7 +446,7 @@ describe("MultiComboBox general interaction", () => { await tokens[2].keys('F4'); - assert.strictEqual(await tokenizer.getProperty("expanded"), true, "tokenizer is scrolled when navigating through the tokens"); + assert.strictEqual(await tokenizer.getProperty("expanded"), false, "tokenizer is scrolled when navigating through the tokens"); }) it("tests filtering of items when nmore popover is open and user types in the input fueld", async () => {