diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index 3f088601e625..0cd2803c939b 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -187,6 +187,21 @@ describe("General Interaction", () => {
cy.get("[ui5-combobox]").should("have.prop", "focused", true);
});
+ it("shows focus outline on list item mousedown", () => {
+ cy.mount(
+
+
+
+
+ );
+
+ cy.get("[ui5-combobox]").shadow().find(".inputIcon").realClick();
+ cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").should("have.attr", "open");
+
+ cy.get("[ui5-cb-item]").first().shadow().find("li").realMouseDown();
+ cy.get("[ui5-cb-item]").first().should("have.prop", "focused", true);
+ });
+
it("tests Combo with two-column layout", () => {
cy.mount(
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 880ff6e25925..1152c6b5e14b 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -1383,6 +1383,14 @@ class ComboBox extends UI5Element implements IFormInputElement {
_itemMousedown(e: MouseEvent) {
e.preventDefault();
+
+ const target = e.target as HTMLElement;
+ const listItem = target.closest("[ui5-cb-item], [ui5-cb-item-group]");
+
+ if (listItem) {
+ this._clearFocus();
+ listItem.focused = true;
+ }
}
_selectItem(e: CustomEvent) {