diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js index d3541663b321b..e8f508a9e995c 100644 --- a/packages/main/src/ComboBox.js +++ b/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); diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index 167c85fe0f028..c0728f5144b06 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -97,6 +97,9 @@
+
+ +
@@ -209,6 +212,10 @@

ComboBox in Compact

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; diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js index 4adfc01ef8e4b..d8d3169ff426e 100644 --- a/packages/main/test/specs/ComboBox.spec.js +++ b/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"); + }); });