fix(ui5-multi-combobox): collapse tokenizer on n-more popover focusout

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;

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}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">

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 () => {