diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx index d133e54b2f72..1c1e51f81098 100644 --- a/packages/main/cypress/specs/ComboBox.cy.tsx +++ b/packages/main/cypress/specs/ComboBox.cy.tsx @@ -85,6 +85,77 @@ describe("Keyboard interaction", () => { cy.get("@combobox") .find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true); }); + it("tests navigating with arrow down and up when item text is the same as in the previous selected item", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-combobox]").as("combobox"); + + cy.get("@combobox") + .shadow() + .find("input") + .as("inner"); + + cy.get("@inner").focus(); + + cy.get("@inner").realPress("F4"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true); + + cy.get("@inner").realPress("ArrowDown"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true); + + cy.get("@inner").realPress("ArrowDown"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true); + + cy.get("@inner").realPress("ArrowUp"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true); + }); + + it("tests navigating with arrow down and up when item text is the same as in the previous selected item (with grouping)", () => { + cy.mount( + + + + + + + + ); + + cy.get("[ui5-combobox]").as("combobox"); + + cy.get("@combobox") + .shadow() + .find("input") + .as("inner"); + + cy.get("@inner").focus(); + + cy.get("@inner").realPress("F4"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(0).should("have.prop", "selected", true); + + cy.get("@inner").realPress("ArrowDown"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true); + + cy.get("@inner").realPress("ArrowDown"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(2).should("have.prop", "selected", true); + + cy.get("@inner").realPress("ArrowUp"); + cy.get("@combobox") + .find("[ui5-cb-item]").eq(1).should("have.prop", "selected", true); + }); }); describe("Event firing", () => { diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index d9564c7a8d28..2b5da5c0ffbe 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -1081,7 +1081,7 @@ class ComboBox extends UI5Element implements IFormInputElement { const matchingItems: Array = this._startsWithMatchingItems(current); if (matchingItems.length) { - const exactMatch = matchingItems.find(item => item.text === current); + const exactMatch = matchingItems.find(item => item.text === current && item.focused); return exactMatch ?? matchingItems[0]; } } @@ -1101,7 +1101,7 @@ 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)); + itemToBeSelected = ((!item.isGroupItem && (item.text === this.value && item === currentlyFocusedItem)) ? item : item?.items?.find(i => i.text === this.value && i.focused)); } });