diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index c7bc268c62c0..e6ffe5fde4b7 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -390,6 +390,15 @@ class ComboBox extends UI5Element implements IFormInputElement { @property({ type: Boolean }) showClearIcon = false; + /** + * When enabled, typing does not auto-select matching items. + * Selection only occurs on explicit user action (arrow up/down navigation key or click). + * @default false + * @public + */ + @property({ type: Boolean }) + noAutoSelection = false; + /** * Indicates whether the input is focused * @private @@ -1047,6 +1056,7 @@ class ComboBox extends UI5Element implements IFormInputElement { } if (isEnter(e)) { + this._selectionPerformed = true; let focusedItem: IComboBoxItem | undefined; this._filteredItems.forEach(item => { @@ -1331,6 +1341,21 @@ class ComboBox extends UI5Element implements IFormInputElement { this.value = itemToBeSelected.text || ""; } + const isExplicitAction = this._selectionPerformed || this._isKeyNavigation; + if (this.noAutoSelection && !isExplicitAction && !this._initialRendering) { + this._filteredItems = this._filteredItems.map(item => { + if (!isInstanceOfComboBoxItemGroup(item)) { + item.selected = false; + } else { + item.items?.forEach(groupItem => { + groupItem.selected = false; + }); + } + return item; + }); + return; + } + this._filteredItems = this._filteredItems.map(item => { if (!isInstanceOfComboBoxItemGroup(item)) { item.selected = item === itemToBeSelected; diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index 0d2e49ee54cf..3c15a416743e 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -517,6 +517,87 @@
Type to filter items - selection only happens on Enter or click, not during typing.
+ +