diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index 3e8c38a5ec36..81c0705df35e 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -3397,6 +3397,138 @@ describe("SelectedValue API", () => {
cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
cy.get("[ui5-cb-item]").eq(2).should("have.prop", "selected", false);
});
+
+ it("should properly select an item when first choosing from items with same text but different values", () => {
+ cy.mount(
+
+
+
+
+
+
+
+ );
+
+ cy.get("#employee-combo")
+ .as("combo")
+ .invoke('on', 'ui5-selection-change', cy.spy().as('selectionChangeSpy'));
+
+ // Open the picker
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-icon]")
+ .realClick();
+
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "open");
+
+ // Select the third item (John Smith - Marketing, emp-342)
+ cy.get("[ui5-cb-item]").eq(2).realClick();
+
+ // Check that selection-change event fired with the correct item
+ cy.get("@selectionChangeSpy").should("have.been.calledOnce");
+ cy.get("@selectionChangeSpy").should("have.been.calledWithMatch", Cypress.sinon.match(event => {
+ return event.detail.item.text === "John Smith" &&
+ event.detail.item.value === "emp-342" &&
+ event.detail.item.additionalText === "Marketing";
+ }));
+
+ // Verify the combo has the correct value and selectedValue
+ cy.get("@combo")
+ .should("have.prop", "value", "John Smith")
+ .should("have.prop", "selectedValue", "emp-342");
+
+ // Re-open the picker
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-icon]")
+ .realClick();
+
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "open");
+
+ // Verify the third item is selected
+ cy.get("[ui5-cb-item]").eq(0).should("have.prop", "selected", false);
+ cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", false);
+ cy.get("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
+ cy.get("[ui5-cb-item]").eq(3).should("have.prop", "selected", false);
+ cy.get("[ui5-cb-item]").eq(4).should("have.prop", "selected", false);
+ });
+
+ it("should properly select item with same text but different values after consecutive selects", () => {
+ cy.mount(
+
+
+
+
+
+
+
+ );
+
+ cy.get("#employee-combo")
+ .as("combo")
+ .invoke('on', 'ui5-selection-change', cy.spy().as('selectionChangeSpy'));
+
+ // Open the picker
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-icon]")
+ .realClick();
+
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "open");
+
+ // Select the third item (John Smith - Marketing, emp-342)
+ cy.get("[ui5-cb-item]").eq(2).realClick();
+
+ // Verify the combo has the correct value and selectedValue
+ cy.get("@combo")
+ .should("have.prop", "value", "John Smith")
+ .should("have.prop", "selectedValue", "emp-342");
+
+ // Re-open the picker
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-icon]")
+ .realClick();
+
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "open");
+
+ // Verify the third item is selected
+ cy.get("[ui5-cb-item]").eq(2).should("have.prop", "selected", true);
+
+ // select the second item
+ cy.get("[ui5-cb-item]").eq(1).realClick();
+
+ // Verify the combo has the correct value and selectedValue
+ cy.get("@combo")
+ .should("have.prop", "value", "John Smith")
+ .should("have.prop", "selectedValue", "emp-205");
+
+ // Re-open the picker
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-icon]")
+ .realClick();
+
+ cy.get("@combo")
+ .shadow()
+ .find("[ui5-responsive-popover]")
+ .should("have.attr", "open");
+
+ // Verify the second item is selected
+ cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
+ });
});
describe("Case-Insensitive Selection", () => {
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 21c466e405c0..f888d89d0f16 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -1373,6 +1373,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
}
this.value = this._selectedItemText;
+ // On first item select the _useSelectedValue is still false.
+ // In case the item has a value property, we set the _useSelectedValue to true to start working with the value instead with the text.
+ if (!this._useSelectedValue && item.value !== undefined) {
+ this._useSelectedValue = true;
+ }
+
if (this._useSelectedValue) {
this.selectedValue = item.value;
}