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 @@