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; }