= this._startsWithMatchingItems(current);
if (matchingItems.length) {
- const exactMatch = matchingItems.find(item => item.text === current);
+ let exactMatch;
+ if (this._useSelectedValue) {
+ exactMatch = matchingItems.find(item => item.value === (currentlyFocusedItem?.value || this.selectedValue) && item.text === current);
+ } else {
+ exactMatch = matchingItems.find(item => item.text === current);
+ }
+
return exactMatch ?? matchingItems[0];
}
}
@@ -1166,11 +1189,16 @@ class ComboBox extends UI5Element implements IFormInputElement {
this.inner.value = value;
this.inner.setSelectionRange(filterValue.length, value.length);
this.value = value;
+
+ if (this._useSelectedValue) {
+ this.selectedValue = item.value;
+ }
}
_selectMatchingItem() {
const currentlyFocusedItem = this.items.find(item => item.focused);
const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
+ const valueToMatch = currentlyFocusedItem?.value ?? this.selectedValue;
let itemToBeSelected: IComboBoxItem | undefined;
let previouslySelectedItem: IComboBoxItem | undefined;
@@ -1190,7 +1218,19 @@ class ComboBox extends UI5Element implements IFormInputElement {
this._filteredItems.forEach(item => {
if (!shouldSelectionBeCleared && !itemToBeSelected) {
- itemToBeSelected = ((!item.isGroupItem && (item.text === this.value)) ? item : item?.items?.find(i => i.text === this.value));
+ if (isInstanceOfComboBoxItemGroup(item)) {
+ if (this._useSelectedValue) {
+ itemToBeSelected = item.items.find(i => i.value === valueToMatch && this.value === i.text);
+ } else {
+ itemToBeSelected = item.items?.find(i => i.text === this.value);
+ }
+ } else {
+ if (this._useSelectedValue) {
+ itemToBeSelected = this.items.find(i => i.value === valueToMatch && this.value === i.text);
+ return;
+ }
+ itemToBeSelected = item.text === this.value ? item : undefined;
+ }
}
});
@@ -1207,6 +1247,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
return item;
});
+ if (!itemToBeSelected && this._useSelectedValue) {
+ this.selectedValue = undefined;
+ } else {
+ this.selectedValue = itemToBeSelected?.value;
+ }
+
const noUserInteraction = !this.focused && !this._isKeyNavigation && !this._selectionPerformed && !this._iconPressed;
// Skip firing "selection-change" event if this is initial rendering or if there has been no user interaction yet
if (this._initialRendering || noUserInteraction) {
@@ -1259,6 +1305,9 @@ class ComboBox extends UI5Element implements IFormInputElement {
}
this.value = this._selectedItemText;
+ if (this._useSelectedValue) {
+ this.selectedValue = item.value;
+ }
if (!item.selected) {
this.fireDecoratorEvent("selection-change", {
diff --git a/packages/main/src/ComboBoxItem.ts b/packages/main/src/ComboBoxItem.ts
index a59d7530ec98..8b14bc1b55d5 100644
--- a/packages/main/src/ComboBoxItem.ts
+++ b/packages/main/src/ComboBoxItem.ts
@@ -45,6 +45,16 @@ class ComboBoxItem extends ListItemBase implements IComboBoxItem {
@property({ type: Boolean, noAttribute: true })
_isVisible = false;
+ /**
+ * Defines the value of the `ui5-combobox-item`.
+ * Used for selection. Check ComboBox' selectedValue property for more information.
+ * @default undefined
+ * @public
+ * @since 2.19.0
+ */
+ @property()
+ value?: string;
+
/**
* Indicates whether the item is focssed
* @protected
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index abf48ebbf21c..3f9f895f520f 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -27,7 +27,7 @@
Select country:
-
+
@@ -308,6 +308,17 @@ ComboBox in Compact
+
+ ComboBox - items with same text but different values
+
+
+
+
+
+
+
+
+