fix(ui5-multi-combobox): correct focus handling when picker is opened via icon (#2868)

Author: ivoplashkov

packages/main/src/MultiComboBox.js

@@ -428,11 +428,11 @@ class MultiComboBox extends UI5Element {
 	}
 
 	togglePopover() {
-		this._toggleRespPopover();
-
 		if (!isPhone()) {
 			this._inputDom.focus();
 		}
+
+		this._toggleRespPopover();
 	}
 
 	filterSelectedItems(event) {

packages/main/test/pages/MultiComboBox.html

@@ -131,7 +131,7 @@
 		<span>value state success </span>
 
 		<br>
-		<ui5-multi-combobox allow-custom-values placeholder="Some initial text"
+		<ui5-multi-combobox id="mcb-success" allow-custom-values placeholder="Some initial text"
 			value-state="Success">
 			<ui5-mcb-item selected text="Cosy"></ui5-mcb-item>
 			<ui5-mcb-item text="Compact"></ui5-mcb-item>

packages/main/test/specs/MultiComboBox.spec.js

@@ -16,7 +16,6 @@ describe("MultiComboBox general interaction", () => {
 			assert.ok(!popover.getProperty("opened"), "Popover should close");
 		});
 
-		/*
 		it("Checks focus state", () => {
 			const mcb = browser.$("#multi1");
 			const input = mcb.shadow$("#ui5-multi-combobox-input");
@@ -35,7 +34,6 @@ describe("MultiComboBox general interaction", () => {
 
 			assert.ok(mcb.getProperty("focused"), "MultiComboBox should be focused again.");
 		});
-		*/
 
 		it("MultiComboBox open property is set correctly", () => {
 			const mcb = browser.$("#multi1");
@@ -111,6 +109,21 @@ describe("MultiComboBox general interaction", () => {
 			resetBtn.click();
 		});
 
+		it("When popover is opened via icon and item is selected/deselected, focus should return to the MultiComboBox", () => {
+			const icon = browser.$("#mcb-success").shadow$("[input-icon]");
+			const staticAreaItemClassName = browser.getStaticAreaItemClassName("#mcb-success")
+			const popover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+			const firstItem = popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
+
+			icon.click();
+
+			assert.strictEqual(popover.getProperty("opened"), true, "The popover should be opened");
+
+			firstItem.click();
+
+			assert.ok(browser.$("#mcb-success").getProperty("focused"), "MultiComboBox should be focused.");
+		});
+
 		it("Opens all items popover when start typing and filters items", () => {
 			const input = browser.$("#mcb").shadow$("#ui5-multi-combobox-input");
 			const staticAreaItemClassName = browser.getStaticAreaItemClassName("#mcb")
@@ -173,6 +186,7 @@ describe("MultiComboBox general interaction", () => {
 
 			assert.strictEqual(popover.getProperty("opened"), false, "When the content is clicked, the popover should close");
 			assert.strictEqual(input.getValue(), "", "When the content is clicked, the value should be removed");
+			assert.ok(browser.$("#another-mcb").getProperty("focused"), "MultiComboBox should be focused.");
 		});
 
 		it("When item's checkbox is clicked, the popover should not be closed and the value in the input should be kept", () => {