diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index b025dc614a0a5..5f10427a2d2c9 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -790,6 +790,50 @@ describe("Events", () => {
.should("have.been.calledOnce");
});
+ it("fires search-button-click with correct targetRef when ui5-shellbar-search is used", () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.get("[ui5-shellbar]").as("shellbar");
+
+ cy.get("@shellbar").then(shellbar => {
+ shellbar.get(0).addEventListener("ui5-search-button-click", cy.stub().as("searchButtonClick"));
+ });
+
+ // The toggle button lives inside ui5-shellbar-search's shadow DOM
+ cy.get("[ui5-shellbar-search]")
+ .shadow()
+ .find(".ui5-shell-search-field-button")
+ .click();
+
+ cy.get("@searchButtonClick").should("have.been.calledOnce");
+
+ // Capture the event args before asserting — the toggle button leaves the DOM
+ // after the click expands the search field, which would break a chained assertion.
+ cy.get("@searchButtonClick").then(stub => {
+ const targetRef = (stub as sinon.SinonStub).firstCall.args[0].detail.targetRef;
+ expect(targetRef).to.not.be.null;
+ });
+ });
+
+ it("getSearchButtonDomRef returns the toggle button when ui5-shellbar-search is collapsed", () => {
+ cy.mount(
+
+
+
+ );
+
+ cy.get("[ui5-shellbar]").then(async $shellbar => {
+ const shellbar = $shellbar[0] as ShellBar;
+ const ref = await shellbar.getSearchButtonDomRef();
+ expect(ref).to.not.be.null;
+ expect(ref!.classList.contains("ui5-shell-search-field-button")).to.be.true;
+ });
+ });
+
it("Test logo click fires logo-click event only once", () => {
cy.mount(
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 1fb85fb70b6f8..54a8dbc5103f6 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -39,6 +39,7 @@ import type { IShellBarSearchController } from "./shellbar/IShellBarSearchContro
import ShellBarLegacy from "./shellbar/ShellBarLegacy.js";
import ShellBarSearch from "./shellbar/ShellBarSearch.js";
import ShellBarSearchLegacy from "./shellbar/ShellBarSearchLegacy.js";
+import type ShellBarSearchComponent from "./ShellBarSearch.js";
import ShellBarOverflow from "./shellbar/ShellBarOverflow.js";
import ShellBarAccessibility from "./shellbar/ShellBarAccessibility.js";
import ShellBarItemNavigation from "./shellbar/ShellBarItemNavigation.js";
@@ -914,6 +915,7 @@ class ShellBar extends UI5Element {
getSearchState: () => this.enabledFeatures.search && this.showSearchField,
getCSSVariable: (cssVar: string) => this.getCSSVariable(cssVar),
setSearchState: (expanded: boolean) => this.setSearchState(expanded),
+ handleSearchButtonClick: () => this.handleSearchButtonClick(),
getOverflowed: () => this.overflow.isOverflowing(this.overflowOuter!, this.overflowInner!),
};
}
@@ -926,7 +928,9 @@ class ShellBar extends UI5Element {
}
handleSearchButtonClick() {
- const searchButton = this.shadowRoot!.querySelector