From dbf2c7d4c2dda281d08378cb5ab42b22839f2b8f Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Mon, 4 May 2026 08:31:21 +0300
Subject: [PATCH] fix(ui5-combobox): show focus outline on list item mousedown

Set the focused property on the clicked list item during mousedown
so the CSS [focused] attribute selector shows the focus outline.
preventDefault() is kept to avoid spurious focusout events on the input.

Fixes #13444
---
 packages/main/cypress/specs/ComboBox.cy.tsx | 15 +++++++++++++++
 packages/main/src/ComboBox.ts               |  8 ++++++++
 2 files changed, 23 insertions(+)

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(
+			<ComboBox>
+				<ComboBoxItem text="One" />
+				<ComboBoxItem text="Two" />
+			</ComboBox>
+		);
+
+		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(
 			<ComboBox>
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<ComboBoxItem>("[ui5-cb-item], [ui5-cb-item-group]");
+
+		if (listItem) {
+			this._clearFocus();
+			listItem.focused = true;
+		}
 	}
 
 	_selectItem(e: CustomEvent<ListItemClickEventDetail>) {