From cbcd4cf4278d651e827ef050530252f3ced72052 Mon Sep 17 00:00:00 2001 From: Ivanova Terzieva Date: Thu, 19 Mar 2026 16:28:18 +0200 Subject: [PATCH 1/2] fix(ui5-combo-box): proper first select of an item with duplicate Fixes: #13292 First select of an item with duplicate text now works properly as long as value property is set to the item. --- packages/main/cypress/specs/ComboBox.cy.tsx | 132 ++++++++++++++++++++ packages/main/src/ComboBox.ts | 6 + 2 files changed, 138 insertions(+) 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..611a7cbbb794 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; } From 3b2464945a18fcc7976af87f8993d105aa96b551 Mon Sep 17 00:00:00 2001 From: Ivanova Terzieva Date: Thu, 19 Mar 2026 17:21:10 +0200 Subject: [PATCH 2/2] fix(ui5-combo-box): use value when first selecting an item with value --- packages/main/src/ComboBox.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 611a7cbbb794..f888d89d0f16 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -1373,9 +1373,9 @@ 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) { + // 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; }