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