feat(ui5-multicombobox): introduce open property and openChange event (#930)

Author: niyap

packages/main/src/MultiComboBox.js

@@ -122,6 +122,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.5
+		 * @public
+		 */
+		open: {
+			type: Boolean,
+		},
+
 		/**
 		 * Indicates whether the input is focssed
 		 * @private
@@ -164,6 +176,15 @@ const metadata = {
 		 */
 		input: {},
 
+		/**
+		 * Fired when the dropdown is opened or closed.
+		 *
+		 * @event
+		 * @since 1.0.0-rc.5
+		 * @public
+		 */
+		openChange: {},
+
 		/**
 		 * Fired when selection is changed by user interaction
 		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
@@ -388,6 +409,9 @@ class MultiComboBox extends UI5Element {
 
 	_toggleIcon() {
 		this._iconPressed = !this._iconPressed;
+		this.open = this._iconPressed;
+
+		this.fireEvent("openChange");
 	}
 
 	_getSelectedItems() {
@@ -458,6 +482,10 @@ class MultiComboBox extends UI5Element {
 		this._filteredItems = filteredItems;
 	}
 
+	onAfterRendering() {
+		this.open && this._getPopover().openBy(this);
+	}
+
 	get _tokenizer() {
 		return this.shadowRoot.querySelector("ui5-tokenizer");
 	}

packages/main/test/pages/MultiComboBox.html

@@ -250,17 +250,28 @@
 		const eventParamsInput = document.getElementById("events-parameters");
 		const callCountInput = document.getElementById("events-call-count");
 		const resetBtn = document.getElementById("reset-btn");
+		var selectionChangeCounter = 0;
+		var openChangeCounter = 0;
 
 		document.getElementById("mcb").addEventListener("ui5-selectionChange", function (event) {
+			selectionChangeCounter += 1;
 			eventNameInput.value = "selectionChange";
 			eventParamsInput.value = event.detail.items.length;
-			callCountInput.value = parseInt(callCountInput.value) + 1;
+			callCountInput.value = selectionChangeCounter;
+		});
+
+		document.getElementById("multi1").addEventListener("ui5-openChange", function (event) {
+			openChangeCounter += 1;
+			eventNameInput.value = "openChange";
+			callCountInput.value = openChangeCounter;
 		});
 
 		resetBtn.addEventListener("click", function (event) {
 			eventNameInput.value = "";
 			eventParamsInput.value = "";
 			callCountInput.value = "";
+			selectionChangeCounter = 0;
+			openChangeCounter = 0;
 		});
 	</script>
 

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

@@ -14,6 +14,28 @@ describe("MultiComboBox general interaction", () => {
 			icon.click();
 			assert.ok(!popover.getProperty("opened"), "Popover should close");
 		});
+
+		it("MultiComboBox open property is set correctly", () => {
+			const mcb = browser.$("#multi1");
+			const icon = browser.$("#multi1").shadow$("[input-icon]");
+			const eventInput = $("#events-input");
+			const callCountInput = $("#events-call-count");
+			const resetBtn = $("#reset-btn");
+
+			resetBtn.click();
+			icon.click();
+			assert.ok(mcb.getProperty("open"), "MultiComboBox should be opened");
+			assert.strictEqual(eventInput.getValue(), "openChange", "openChange should be called");
+			assert.strictEqual(callCountInput.getValue(), "1", "Event should be called once");
+
+			icon.click();
+			assert.ok(!mcb.getProperty("open"), "MultiComboBox should be closed");
+
+			assert.strictEqual(eventInput.getValue(), "openChange", "openChange should be called");
+			assert.strictEqual(callCountInput.getValue(), "2", "Event should be called once");
+
+			resetBtn.click();
+		});
 	});
 
 	describe("selection and filtering", () => {