From 975dfbffd00aa475c5bf313cd69ce90fa5d2d3fc Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Fri, 17 Jul 2026 19:39:33 +0300 Subject: [PATCH] fix(ui5-shellbar): fix search-button-click event and getSearchButtonDomRef with ui5-shellbar-search Both issues stem from the new ui5-shellbar-search path bypassing handleSearchButtonClick entirely ? the controller called setSearchState directly, which toggled the field but never fired the event. search-button-click not fired (Issue 1) - Add handleSearchButtonClick callback to ShellBarSearchConstructorParams and wire it up via getSearchDeps(). - Route onSearch in the ShellBarSearch controller through handleSearchButtonClick() instead of calling setSearchState directly, so the event fires consistently and preventDefault() is respected. - Resolve the targetRef in handleSearchButtonClick from the ui5-shellbar-search shadow root (.ui5-shell-search-field-button) when isSelfCollapsibleSearch, so event.detail.targetRef is never null. getSearchButtonDomRef returns null (Issue 2) - Add getSearchButtonDomRef() to ShellBarSearch (the custom element), querying .ui5-shell-search-field-button from its own shadow root. - Delegate from ShellBar.getSearchButtonDomRef() to the component method when isSelfCollapsibleSearch; legacy data-ui5-stable path is unchanged. Returns null when the search is expanded (button not in DOM) ? correct. Tests (ShellBar.cy.tsx) - fires search-button-click with non-null targetRef when ui5-shellbar-search is used. - getSearchButtonDomRef returns the toggle button when collapsed. Sample (ShellBar.html) - Added a ui5-shellbar-search section with live event output and a button to call getSearchButtonDomRef() and display the result. SNOW: DINC0975247 SNOW: DINC0975256 --- packages/fiori/cypress/specs/ShellBar.cy.tsx | 44 +++++++++++++++++++ packages/fiori/src/ShellBar.ts | 9 +++- packages/fiori/src/ShellBarSearch.ts | 4 ++ packages/fiori/src/shellbar/ShellBarSearch.ts | 6 ++- packages/fiori/test/pages/ShellBar.html | 24 ++++++++++ 5 files changed, 85 insertions(+), 2 deletions(-) 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