From c0c2d2a79db33bf969b2fb8a42364c3f54a06b93 Mon Sep 17 00:00:00 2001
From: Dobrin Dimchev <dobrin.dimchev@sap.com>
Date: Thu, 18 Sep 2025 15:14:37 +0300
Subject: [PATCH] fix(ui5-shellbar-item): correct getFocusDomRef return value

---
 .../fiori/cypress/specs/ShellBarItem.cy.tsx   | 62 +++++++++++++++++++
 packages/fiori/src/ShellBar.ts                |  2 +-
 .../fiori/src/ShellBarPopoverTemplate.tsx     |  1 +
 packages/fiori/src/ShellBarTemplate.tsx       |  2 +-
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 packages/fiori/cypress/specs/ShellBarItem.cy.tsx

diff --git a/packages/fiori/cypress/specs/ShellBarItem.cy.tsx b/packages/fiori/cypress/specs/ShellBarItem.cy.tsx
new file mode 100644
index 000000000000..005e1759b1ea
--- /dev/null
+++ b/packages/fiori/cypress/specs/ShellBarItem.cy.tsx
@@ -0,0 +1,62 @@
+import ShellBar from "../../src/ShellBar.js";
+import ShellBarItem from "../../src/ShellBarItem.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Avatar from "@ui5/webcomponents/dist/Avatar.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+
+describe("ShellBarItem getFocusDomRef", () => {
+	it("should return the correct DOM element when item is in the bar", () => {
+		cy.mount(
+			<ShellBar id="shellbar-test">
+				<ShellBarItem id="item1" icon="accept" text="Item 1" stable-dom-ref="item-1" />
+			</ShellBar>
+		);
+
+		cy.get<ShellBarItem>("#item1")
+			.then(($item) => {
+				const focusRef = $item[0].getFocusDomRef();
+				expect(focusRef).to.be.instanceOf(HTMLElement);
+				expect(focusRef).has.attr('ui5-button');
+				expect(focusRef?.getAttribute('data-ui5-stable')).to.equal('item-1');
+			});
+	});
+
+	it("should return the correct DOM element when item is in overflow popover", () => {
+		cy.mount(
+			<ShellBar id="shellbar-overflow-test" showNotifications showProductSwitch>
+				<Button icon="nav-back" slot="startButton" />
+				<ShellBarItem id="overflow-item1" icon="accept" text="Item 1" stable-dom-ref="overflow-1" />
+				<ShellBarItem id="overflow-item2" icon="alert" text="Item 2" stable-dom-ref="overflow-2" />
+				<ShellBarItem id="overflow-item3" icon="attachment" text="Item 3" stable-dom-ref="overflow-3" />
+				<Avatar slot="profile">
+					<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+				</Avatar>
+				<Input placeholder="Search" slot="searchField" />
+			</ShellBar>
+		);
+
+		// Force overflow by resizing viewport
+		cy.viewport(320, 800);
+		
+		// Open overflow popover
+		cy.get("#shellbar-overflow-test")
+			.shadow()
+			.find(".ui5-shellbar-overflow-button")
+			.should("be.visible")
+			.click();
+
+		cy.get("#shellbar-overflow-test")
+			.shadow()
+			.find(".ui5-shellbar-overflow-popover")
+			.should("be.visible");
+
+		// Test when items are in overflow popover
+		cy.get<ShellBarItem>("#overflow-item1")
+			.then(($item) => {
+				const focusRef = $item[0].getFocusDomRef();
+				// When overflowed, should return the list item in the popover
+				expect(focusRef?.hasAttribute('ui5-li'));
+				expect(focusRef?.getAttribute('data-ui5-stable')).to.equal('overflow-1');
+			});
+	});
+});
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 8de6a9e99188..a9846f5814ee 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -1272,7 +1272,7 @@ class ShellBar extends UI5Element {
 				const bIndex = PREDEFINED_PLACE_ACTIONS.indexOf(b.icon || "");
 				return aIndex - bIndex;
 			}).map((item: ShellBarItem) => {
-				item._getRealDomRef = () => this.getDomRef()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
+				item._getRealDomRef = () => this.shadowRoot!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
 				// check if included for lean mode
 				const show = !!item.icon || false;
 				return {
diff --git a/packages/fiori/src/ShellBarPopoverTemplate.tsx b/packages/fiori/src/ShellBarPopoverTemplate.tsx
index a97604a13117..b32f7491d225 100644
--- a/packages/fiori/src/ShellBarPopoverTemplate.tsx
+++ b/packages/fiori/src/ShellBarPopoverTemplate.tsx
@@ -32,6 +32,7 @@ export default function PopoversTemplate(this: ShellBar) {
 							key={index}
 							data-count={icon.count}
 							data-ui5-external-action-item-id={icon.refItemid}
+							data-ui5-stable={icon.stableDomRef}
 							icon={icon.icon ? icon.icon : ""}
 							type="Active"
 							onui5-_press={icon.press}
diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx
index 914146bce097..a70676e1d85f 100644
--- a/packages/fiori/src/ShellBarTemplate.tsx
+++ b/packages/fiori/src/ShellBarTemplate.tsx
@@ -215,7 +215,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 									tooltip={item.tooltip}
 									data-ui5-notifications-count={this.notificationsCount}
 									data-ui5-external-action-item-id={item.refItemid}
-									data-ui5-stable={item.stableDomRef}
+									data-ui5-stable={item.icon && !this.isIconHidden(item.icon) ? item.stableDomRef : undefined}
 									onClick={item.press}
 									accessibilityAttributes={item.accessibilityAttributes}
 								>