From 6187df8883f86dc897f3efe047c63f0212becaa4 Mon Sep 17 00:00:00 2001 From: Nikolay Deshev Date: Wed, 10 Jul 2024 14:33:07 +0300 Subject: [PATCH] fix(ui5-multi-combobox): collapse the tokenizer on mobile devices (#9406) * fix(ui5-multi-combobox): collapse the tokenizer on mobile devices picker close fixes: #9176 --- packages/main/src/MultiComboBox.ts | 1 + .../test/specs/MultiComboBox.mobile.spec.js | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 0271c14875ff..e4e0e4311251 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -1440,6 +1440,7 @@ class MultiComboBox extends UI5Element { // close device's keyboard and prevent further typing if (isPhone()) { this._dialogInputValueState = this.valueState; + this._tokenizer.expanded = false; this.blur(); } diff --git a/packages/main/test/specs/MultiComboBox.mobile.spec.js b/packages/main/test/specs/MultiComboBox.mobile.spec.js index 393b0abd0f9f..6065e63e4123 100644 --- a/packages/main/test/specs/MultiComboBox.mobile.spec.js +++ b/packages/main/test/specs/MultiComboBox.mobile.spec.js @@ -38,6 +38,25 @@ describe("Basic interaction", () => { assert.notOk(await picker.isDisplayedInViewport(), "Picker is closed now"); }); + it("Should collapse the tokenizer when the picker is closed", async () => { + const mcb = await browser.$("#multi1"); + const tokenizer = await mcb.shadow$('ui5-tokenizer'); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1"); + const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + const dialogCloseButton = await picker.$(".ui5-responsive-popover-close-btn"); + + await mcb.click(); + await dialogCloseButton.click(); + + assert.notOk(await tokenizer.getAttribute("expanded"), "The tokenizer is not expanded after closing the picker"); + + await tokenizer.shadow$(".ui5-tokenizer-more-text").click(); + + assert.notOk(await tokenizer.getAttribute("expanded"), "The tokenizer is not expanded after closing the picker when opened from the 'n-more' link"); + + await dialogCloseButton.click(); + }); + it("Should close the mobile picker dialog when pressing the OK button", async () => { const multiCombo = await browser.$("#multi1"); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");