feat(ui5-combobox): introduces selection-change event (#2090)

Author: MapTo0

packages/main/src/ComboBox.js

@@ -297,6 +297,19 @@ const metadata = {
 		 * @public
 		 */
 		input: {},
+
+		/**
+		 * Fired when selection is changed by user interaction
+		 *
+		 * @event sap.ui.webcomponents.main.Combobox#selection-change
+		 * @param {HTMLElement} item item to be selected.
+		 * @public
+		 */
+		"selection-change": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
 	},
 };
 
@@ -371,6 +384,7 @@ class ComboBox extends UI5Element {
 		this._initialRendering = true;
 		this._itemFocused = false;
 		this._tempFilterValue = "";
+		this._selectionChanged = false;
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
@@ -385,7 +399,15 @@ class ComboBox extends UI5Element {
 		}
 
 		if (this._autocomplete && domValue !== "") {
-			this._autoCompleteValue(domValue);
+			const item = this._autoCompleteValue(domValue);
+
+			if (!this._selectionChanged && (item && !item.selected)) {
+				this.fireEvent("selection-change", {
+					item,
+				});
+
+				this._selectionChanged = false;
+			}
 		} else {
 			this._tempValue = domValue;
 		}
@@ -570,6 +592,12 @@ class ComboBox extends UI5Element {
 		this._isKeyNavigation = true;
 		this._itemFocused = true;
 		this.fireEvent("input");
+
+		this.fireEvent("selection-change", {
+			item: this._filteredItems[indexOfItem],
+		});
+
+		this._selectionChanged = true;
 	}
 
 	_keydown(event) {
@@ -629,6 +657,10 @@ class ComboBox extends UI5Element {
 				this.inner.setSelectionRange(0, this._tempValue.length);
 			}, 0);
 		}
+
+		if (matchingItems.length) {
+			return matchingItems[0];
+		}
 	}
 
 	_selectMatchingItem() {
@@ -659,6 +691,14 @@ class ComboBox extends UI5Element {
 		this._tempValue = listItem.mappedItem.text;
 		this.filterValue = this._tempValue;
 
+		if (!listItem.mappedItem.selected) {
+			this.fireEvent("selection-change", {
+				item: listItem.mappedItem,
+			});
+
+			this._selectionChanged = true;
+		}
+
 		this._filteredItems.map(item => {
 			item.selected = (item === listItem.mappedItem);
 

packages/main/test/pages/ComboBox.html

@@ -97,6 +97,9 @@
 
 	<div class="demo-section">
 		<span id="change-event-result"></span>
+		<br />
+		<span id="selection-change-event-result"></span>
+
 	</div>
 
 	<div class="demo-section">
@@ -209,6 +212,10 @@ <h3>ComboBox in Compact</h3>
 			document.getElementById("change-event-result").innerHTML = event.target.value;
 		});
 
+		document.getElementById("combo").addEventListener("ui5-selection-change", function(event) {
+			document.getElementById("selection-change-event-result").innerHTML = event.detail.item.text;
+		});
+
 		document.getElementById("change-cb").addEventListener("ui5-change", function(event) {
 			document.getElementById("change-placeholder").innerHTML = event.target.value;
 			document.getElementById("change-count").innerHTML = parseInt(document.getElementById("change-count").innerHTML) + 1;

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

@@ -272,4 +272,21 @@ describe("General interaction", () => {
 		listItems = popover.$("ui5-list").$$("ui5-li");
 		assert.notOk(popover.opened, "Popover should be closed when no match");
 	});
+
+	it ("Tests selection-change event and its parameters", () => {
+		const combo = $("#combo");
+		const label = $("#selection-change-event-result");
+		const arrow = combo.shadow$("[input-icon]");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#combo");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+		let listItems = popover.$("ui5-list").$$("ui5-li");
+
+		arrow.click();
+
+		const listItem = listItems[8];
+
+		listItem.click();
+
+		assert.strictEqual(label.getText(), listItem.shadow$(".ui5-li-title").getText(), "event is fired correctly");
+	});
 });