fix(ui5-multicombobox): enable closing on icon click (#719)

SAP · Aug 13, 2019 · 8d98def · 8d98def
1 parent 1532017
commit 8d98def
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -353,7 +353,7 @@ class MultiComboBox extends UI5Element {
 		const popover = this._getPopover(isMorePopover);
 		const otherPopover = this._getPopover(!isMorePopover);
 
-		if (popover && popover._isOpen) {
+		if (popover && popover.opened) {
 			return popover.close();
 		}
 

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html b/packages/main/test/sap/ui/webcomponents/main/pages/MultiComboBox.html
@@ -77,7 +77,7 @@
 		<span>Predefined value</span>
 
 		<br>
-		<ui5-multi-combobox style="width: 560px;" value="Hello World">
+		<ui5-multi-combobox id="multi1" style="width: 560px;" value="Hello World">
 			<ui5-li style="display: none" selected type="Active">Cosy</ui5-li>
 			<ui5-li style="display: none" type="Active">Compact</ui5-li>
 			<ui5-li style="display: none" selected type="Active">Condensed</ui5-li>

diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
@@ -3,6 +3,19 @@ const assert = require("assert");
 describe("MultiComboBox general interaction", () => {
 	browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/MultiComboBox.html");
 
+	describe("toggling", () => {
+		it("opens/closes", () => {
+			const icon = browser.findElementDeep("#multi1 >>> #ui5-multi-combobox-input ui5-icon");
+			const popover = browser.findElementDeep("#multi1 >>> .ui5-multi-combobox-all-items-popover >>> .ui5-popup-root");
+
+			icon.click();
+			assert.ok(popover.isDisplayedInViewport(), "Popover should be displayed in the viewport");
+
+			icon.click();
+			assert.ok(!popover.isDisplayedInViewport(), "Popover should close");
+		});
+	});
+
 	describe("selection and filtering", () => {
 
 		it("Opens all items popover, selects and deselects the first item", () => {