fix(ui5-combobox): show focus outline on list item mousedown (#13449)

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

Author: ivoplashkov

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>

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>) {