fix(ui5-shellbar): fix search-button-click event and getSearchButtonDomRef with ui5-shellbar-search

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(
+			<ShellBar>
+				<ShellBarSearch slot="searchField" collapsed></ShellBarSearch>
+			</ShellBar>
+		);
+
+		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(
+			<ShellBar>
+				<ShellBarSearch slot="searchField" collapsed></ShellBarSearch>
+			</ShellBar>
+		);
+
+		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(
 			<ShellBar primaryTitle="Product Title" secondaryTitle="Secondary Title">

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<Button>(".ui5-shellbar-search-button");
+		const searchButton = this.isSelfCollapsibleSearch
+			? this.search?.shadowRoot?.querySelector<HTMLElement>(".ui5-shell-search-field-button") ?? null
+			: this.shadowRoot!.querySelector<Button>(".ui5-shellbar-search-button");
 		const defaultPrevented = !this.fireDecoratorEvent("search-button-click", {
 			targetRef: searchButton!,
 			searchFieldVisible: this.showSearchField,
@@ -1181,6 +1185,9 @@ class ShellBar extends UI5Element {
 	 */
 	async getSearchButtonDomRef(): Promise<HTMLElement | null> {
 		await renderFinished();
+		if (this.isSelfCollapsibleSearch) {
+			return (this.search as unknown as ShellBarSearchComponent).getSearchButtonDomRef();
+		}
 		return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="toggle-search"]`);
 	}
 

packages/fiori/src/ShellBarSearch.ts

@@ -100,6 +100,10 @@ class ShellBarSearch extends Search {
 		return isPhone() ? domRef?.querySelector<HTMLInputElement>(`[ui5-responsive-popover] input`) : super.nativeInput;
 	}
 
+	getSearchButtonDomRef(): HTMLElement | null {
+		return this.shadowRoot?.querySelector<HTMLElement>(".ui5-shell-search-field-button") ?? null;
+	}
+
 	_onfocusin() {
 		super._onfocusin();
 

packages/fiori/src/shellbar/ShellBarSearch.ts

@@ -6,6 +6,7 @@ interface ShellBarSearchConstructorParams {
 	getOverflowed: () => boolean;
 	getSearchState: () => boolean;
 	setSearchState: (expanded: boolean) => void;
+	handleSearchButtonClick: () => boolean;
 	getSearchField: () => IShellBarSearchField | null;
 	getCSSVariable: (variable: string) => string;
 }
@@ -26,6 +27,7 @@ class ShellBarSearch implements IShellBarSearchController {
 	private getSearchField: () => IShellBarSearchField | null;
 	private getSearchState: () => boolean;
 	private setSearchState: (expanded: boolean) => void;
+	private handleSearchButtonClick: () => boolean;
 	private getCSSVariable: (variable: string) => string;
 	private initialRender = true;
 
@@ -35,12 +37,14 @@ class ShellBarSearch implements IShellBarSearchController {
 		getSearchField,
 		getSearchState,
 		getCSSVariable,
+		handleSearchButtonClick,
 	}: ShellBarSearchConstructorParams) {
 		this.getOverflowed = getOverflowed;
 		this.getCSSVariable = getCSSVariable;
 		this.getSearchField = getSearchField;
 		this.getSearchState = getSearchState;
 		this.setSearchState = setSearchState;
+		this.handleSearchButtonClick = handleSearchButtonClick;
 	}
 
 	subscribe(searchField: HTMLElement | null = this.getSearchField()) {
@@ -150,7 +154,7 @@ class ShellBarSearch implements IShellBarSearchController {
 			return;
 		}
 
-		this.setSearchState(!this.getSearchState());
+		this.handleSearchButtonClick();
 	}
 
 	/**

packages/fiori/test/pages/ShellBar.html

@@ -273,6 +273,20 @@ <h3>ShellBar in Compact</h3>
 		</ui5-input>
 	</ui5-shellbar>
 
+	<ui5-title>ShellBar with ui5-shellbar-search (new search path)</ui5-title>
+	<ui5-label>search-button-click fired:</ui5-label><ui5-input id="sb-new-search-event-out" placeholder="event output"></ui5-input><br>
+	<ui5-label>getSearchButtonDomRef result:</ui5-label><ui5-input id="sb-new-search-ref-out" placeholder="DOM ref result"></ui5-input><br>
+	<ui5-button id="sb-new-search-get-ref-btn">Call getSearchButtonDomRef()</ui5-button>
+
+	<ui5-shellbar id="sb-new-search">
+		<ui5-shellbar-branding slot="branding">Product Title</ui5-shellbar-branding>
+		<ui5-shellbar-search id="sb-new-search-field" slot="searchField">
+			<ui5-search-item text="Algeria"></ui5-search-item>
+			<ui5-search-item text="Bulgaria"></ui5-search-item>
+			<ui5-search-item text="Croatia"></ui5-search-item>
+		</ui5-shellbar-search>
+	</ui5-shellbar>
+
 	<script>
 
 		[...document.querySelectorAll("ui5-toggle-button")].forEach(el => {
@@ -398,6 +412,16 @@ <h3>ShellBar in Compact</h3>
 			event.preventDefault();
 		});
 
+		var sbNewSearch = document.getElementById("sb-new-search");
+		sbNewSearch.addEventListener("ui5-search-button-click", function(event) {
+			document.getElementById("sb-new-search-event-out").value = "fired — searchFieldVisible: " + event.detail.searchFieldVisible + ", targetRef: " + (event.detail.targetRef ? event.detail.targetRef.tagName : "null");
+		});
+
+		document.getElementById("sb-new-search-get-ref-btn").addEventListener("click", async function() {
+			var ref = await sbNewSearch.getSearchButtonDomRef();
+			document.getElementById("sb-new-search-ref-out").value = ref ? ref.tagName + "." + ref.className : "null";
+		});
+
 	</script>
 </body>
 </html>