From 7aa0dd7df3d609264ab0bb2590db76b8c804a100 Mon Sep 17 00:00:00 2001
From: Plamen Ivanov <plamen.ivanov01@sap.com>
Date: Thu, 31 Jul 2025 15:50:27 +0300
Subject: [PATCH 1/5] fix(ui5-shellbar): ensure avatar click event is triggered
 correctly

Fixes: #11920
---
 packages/fiori/src/ShellBar.ts            |  8 ++++++
 packages/main/cypress/specs/Avatar.cy.tsx | 31 +++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index b901901454da..0be3373aea9b 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -568,6 +568,7 @@ class ShellBar extends UI5Element {
 	_lastOffsetWidth = 0;
 	_observableContent: Array<HTMLElement> = [];
 	_autoRestoreSearchField = false;
+	_isForwardingProfileClick = false;
 
 	_onSearchOpenBound = this._onSearchOpen.bind(this);
 	_onSearchCloseBound = this._onSearchClose.bind(this);
@@ -1095,6 +1096,13 @@ class ShellBar extends UI5Element {
 		this.fireDecoratorEvent("profile-click", {
 			targetRef: this.shadowRoot!.querySelector<Button>(".ui5-shellbar-image-button")!,
 		});
+
+		if (this.profile && this.profile.length > 0) {
+			const avatar = this.profile[0];
+			// Forward the click event to the avatar
+			const mouseClickEvent = new MouseEvent("ui5-click");
+			avatar.dispatchEvent(mouseClickEvent);
+		}
 	}
 
 	_handleCancelButtonPress() {
diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx
index ce6689467345..8fd08379d597 100644
--- a/packages/main/cypress/specs/Avatar.cy.tsx
+++ b/packages/main/cypress/specs/Avatar.cy.tsx
@@ -1,9 +1,11 @@
 import Avatar from "../../src/Avatar.js";
 import Tag from "../../src/Tag.js";
 import Icon from "../../src/Icon.js";
+import ShellBar from "../../../fiori/src/ShellBar.js";
 import "@ui5/webcomponents-icons/dist/supplier.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/person-placeholder.js";
+import React, { useEffect, useRef } from "react";
 
 describe("Accessibility", () => {
 	it("checks if initials of avatar are correctly announced", () => {
@@ -305,4 +307,33 @@ describe("Fallback Logic", () => {
 			.find(".ui5-avatar-icon-fallback")
 			.should("have.class", "ui5-avatar-fallback-icon-hidden");
 	});
+
+	it("forwards click from shellbar profile button to slotted avatar (mount pattern)", () => {
+		const clickSpy = cy.spy().as("avatarClickSpy");
+		const profileClickSpy = cy.spy().as("profileClickSpy");
+
+		cy.mount(
+			<div>
+				<ShellBar id="test-shellbar">
+					<Avatar
+						id="test-avatar"
+						slot="profile"
+						interactive
+						initials="XY"
+					/>
+				</ShellBar>
+			</div>
+		);
+
+		cy.get("#test-avatar").then($el => {
+			$el[0].addEventListener("ui5-click", clickSpy);
+		});
+		cy.get("#test-shellbar").then($el => {
+			$el[0].addEventListener("ui5-profile-click", profileClickSpy);
+		});
+
+		cy.get("#test-shellbar").shadow().find(".ui5-shellbar-image-button").realClick();
+		cy.get("@profileClickSpy").should("have.been.calledOnce");
+		cy.get("@avatarClickSpy").should("have.been.calledOnce");
+	});
 });

From be9656abd567c77411cc302c5e975f6058532495 Mon Sep 17 00:00:00 2001
From: Plamen Ivanov <plamen.ivanov01@sap.com>
Date: Thu, 31 Jul 2025 15:53:59 +0300
Subject: [PATCH 2/5] fix(ui5-shellbar): ensure avatar click event is triggered
 correctly - removed redundant new lines

---
 packages/fiori/src/ShellBar.ts            | 1 -
 packages/main/cypress/specs/Avatar.cy.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 0be3373aea9b..b510ecfc49c0 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -568,7 +568,6 @@ class ShellBar extends UI5Element {
 	_lastOffsetWidth = 0;
 	_observableContent: Array<HTMLElement> = [];
 	_autoRestoreSearchField = false;
-	_isForwardingProfileClick = false;
 
 	_onSearchOpenBound = this._onSearchOpen.bind(this);
 	_onSearchCloseBound = this._onSearchClose.bind(this);
diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx
index 8fd08379d597..769f98e8026c 100644
--- a/packages/main/cypress/specs/Avatar.cy.tsx
+++ b/packages/main/cypress/specs/Avatar.cy.tsx
@@ -5,7 +5,6 @@ import ShellBar from "../../../fiori/src/ShellBar.js";
 import "@ui5/webcomponents-icons/dist/supplier.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/person-placeholder.js";
-import React, { useEffect, useRef } from "react";
 
 describe("Accessibility", () => {
 	it("checks if initials of avatar are correctly announced", () => {

From c6d9fbf539cfa5ba8e056485ee7b37b79363f8f9 Mon Sep 17 00:00:00 2001
From: Plamen Ivanov <plamen.ivanov01@sap.com>
Date: Fri, 1 Aug 2025 15:04:28 +0300
Subject: [PATCH 3/5] fix(ui5-shellbar): ensure avatar click event is triggered
 correctly - fixed review comments

---
 packages/fiori/cypress/specs/ShellBar.cy.tsx | 31 ++++++++++++++++++++
 packages/fiori/src/ShellBar.ts               |  7 -----
 packages/fiori/src/themes/ShellBar.css       |  1 -
 packages/main/cypress/specs/Avatar.cy.tsx    | 30 -------------------
 packages/main/src/themes/Button.css          |  1 +
 5 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index cc1a64597b7a..14d2bfb30caf 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -321,6 +321,37 @@ describe("Responsiveness", () => {
 });
 
 describe("Slots", () => {
+	describe("Profile slot", () => {
+		it("forwards click from shellbar profile button to slotted avatar (mount pattern)", () => {
+			const clickSpy = cy.spy().as("avatarClickSpy");
+			const profileClickSpy = cy.spy().as("profileClickSpy");
+
+			cy.mount(
+				<div>
+					<ShellBar id="test-shellbar">
+						<Avatar
+							id="test-avatar"
+							slot="profile"
+							interactive
+							initials="XY"
+						/>
+					</ShellBar>
+				</div>
+			);
+
+			cy.get("#test-avatar").then($el => {
+				$el[0].addEventListener("ui5-click", clickSpy);
+			});
+			cy.get("#test-shellbar").then($el => {
+				$el[0].addEventListener("ui5-profile-click", profileClickSpy);
+			});
+
+			cy.get("#test-shellbar").shadow().find(".ui5-shellbar-image-button").realClick();
+			cy.get("@profileClickSpy").should("have.been.calledOnce");
+			cy.get("@avatarClickSpy").should("have.been.calledOnce");
+		});
+	});
+
 	describe("Content slot", () => {
 		it("Test separators visibility", () => {
 			function assertStartSeparatorVisibility(expectedExist: boolean) {
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index b510ecfc49c0..b901901454da 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -1095,13 +1095,6 @@ class ShellBar extends UI5Element {
 		this.fireDecoratorEvent("profile-click", {
 			targetRef: this.shadowRoot!.querySelector<Button>(".ui5-shellbar-image-button")!,
 		});
-
-		if (this.profile && this.profile.length > 0) {
-			const avatar = this.profile[0];
-			// Forward the click event to the avatar
-			const mouseClickEvent = new MouseEvent("ui5-click");
-			avatar.dispatchEvent(mouseClickEvent);
-		}
 	}
 
 	_handleCancelButtonPress() {
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index 595f4cda8334..fa3dc68b7b96 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -114,7 +114,6 @@ slot[name="profile"] {
 	height: 2rem;
 	min-width: 0;
 	min-height: 2rem;
-	pointer-events: none;
 	font-size: var(--_ui5_avatar_fontsize_XS);
 	font-weight: normal;
 }
diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx
index 769f98e8026c..ce6689467345 100644
--- a/packages/main/cypress/specs/Avatar.cy.tsx
+++ b/packages/main/cypress/specs/Avatar.cy.tsx
@@ -1,7 +1,6 @@
 import Avatar from "../../src/Avatar.js";
 import Tag from "../../src/Tag.js";
 import Icon from "../../src/Icon.js";
-import ShellBar from "../../../fiori/src/ShellBar.js";
 import "@ui5/webcomponents-icons/dist/supplier.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/person-placeholder.js";
@@ -306,33 +305,4 @@ describe("Fallback Logic", () => {
 			.find(".ui5-avatar-icon-fallback")
 			.should("have.class", "ui5-avatar-fallback-icon-hidden");
 	});
-
-	it("forwards click from shellbar profile button to slotted avatar (mount pattern)", () => {
-		const clickSpy = cy.spy().as("avatarClickSpy");
-		const profileClickSpy = cy.spy().as("profileClickSpy");
-
-		cy.mount(
-			<div>
-				<ShellBar id="test-shellbar">
-					<Avatar
-						id="test-avatar"
-						slot="profile"
-						interactive
-						initials="XY"
-					/>
-				</ShellBar>
-			</div>
-		);
-
-		cy.get("#test-avatar").then($el => {
-			$el[0].addEventListener("ui5-click", clickSpy);
-		});
-		cy.get("#test-shellbar").then($el => {
-			$el[0].addEventListener("ui5-profile-click", profileClickSpy);
-		});
-
-		cy.get("#test-shellbar").shadow().find(".ui5-shellbar-image-button").realClick();
-		cy.get("@profileClickSpy").should("have.been.calledOnce");
-		cy.get("@avatarClickSpy").should("have.been.calledOnce");
-	});
 });
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index 511decc726b3..2b244280ff58 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -117,6 +117,7 @@
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
+	pointer-events: none;
 	left: 0.0625rem;
 	top: 0.0625rem;
 	right: 0.0625rem;

From 3e771843ccabcf9d0dc9df05c8717cceb06523eb Mon Sep 17 00:00:00 2001
From: Plamen Ivanov <plamen.ivanov01@sap.com>
Date: Fri, 15 Aug 2025 12:57:56 +0300
Subject: [PATCH 4/5] fix(ui5-shellbar): ensure avatar click event is triggered
 correctly - try fixing failing spec file

---
 packages/fiori/test/specs/ShellBar.spec.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
index 88da047c01e2..932aade34f52 100644
--- a/packages/fiori/test/specs/ShellBar.spec.js
+++ b/packages/fiori/test/specs/ShellBar.spec.js
@@ -132,6 +132,11 @@ describe("Component Behavior", () => {
 				const profileIcon = await browser.$("#shellbar").shadow$("[data-profile-btn]");
 				const input = await browser.$("#press-input");
 
+				await browser.waitUntil(() => profileIcon.shadow(".ui5-button-root"), {
+					timeout: 500,
+					timeoutMsg: "Profile button is ready to be clicked"
+				});
+
 				await profileIcon.click();
 				assert.strictEqual(await input.getValue(), "Profile", "Input value is set by click event of Profile");
 			});
@@ -230,6 +235,12 @@ describe("Component Behavior", () => {
 				const input = await browser.$("#press-input");
 
 				await profileIcon.click();
+
+				await browser.waitUntil(async () => (await input.getProperty("value")) === "Profile", {
+					timeout: 500,
+					timeoutMsg: "Input value ready to be asserted."
+				});
+
 				assert.strictEqual(await input.getValue(), "Profile", "Input value is set by click event of Profile");
 			});
 

From 4feb5e8de5fe1d65a8c76f5990c3d3d5208f41e2 Mon Sep 17 00:00:00 2001
From: Plamen Ivanov <plamen.ivanov01@sap.com>
Date: Thu, 18 Sep 2025 17:47:49 +0300
Subject: [PATCH 5/5] fix(ui5-shellbar): ensure avatar click event is triggered
 correctly - fixed cypress tests

---
 packages/fiori/cypress/specs/ShellBar.cy.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index 0f9a1b8e018b..a9bd3011a304 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -794,7 +794,7 @@ describe("Events", () => {
 			cy.get("@shellbar")
 				.shadow()
 				.find("[data-profile-btn]")
-				.click();
+    			.click({ force: true });
 
 			cy.get("@profileClick")
 				.should("have.been.calledOnce");
@@ -1016,7 +1016,7 @@ describe("Events", () => {
 			cy.get("@shellbar")
 				.shadow()
 				.find("[data-profile-btn]")
-				.click();
+   				.click({ force: true });
 
 			cy.get("@profileClick")
 				.should("have.been.calledOnce");