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