refactor(ui5-shellbar): extend mobile support for search field (SAP#11419)

Improved the ShellBar component's search field behavior to align with UX specifications and support responsive, mobile interactions.

**Summary of Changes**

- **UX Compliance**: Prevented the search field from opening in full-width mode by default; initial showSearchField state is now set to false unless triggered.


- **Event Handling:** Added support for ui5-open, ui5-close, and ui5-search events to dynamically manage `show-search-field` state.

- **Testing Enhancements:** Added a dedicated mobile test suite (ShellBar.mobile.cy.tsx) and updated existing tests to reflect the component changes.

Author: dobrinyonkov

packages/fiori/cypress/specs/ShellBar.cy.tsx

@@ -11,7 +11,7 @@ import ToggleButton from "@ui5/webcomponents/dist/ToggleButton.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import Switch from "@ui5/webcomponents/dist/Switch.js";
-import Search from "../../src/Search.js";
+import ShellBarSearch from "../../src/ShellBarSearch.js";
 
 const RESIZE_THROTTLE_RATE = 300; // ms
 
@@ -454,7 +454,7 @@ describe("Slots", () => {
 		it("Test search button is not visible when a self-collapsible search field slot is empty", () => {
 			cy.mount(
 				<ShellBar id="shellbar">
-					<Search slot="searchField"></Search>
+					<ShellBarSearch slot="searchField"></ShellBarSearch>
 				</ShellBar>
 			);
 			cy.get("#shellbar")
@@ -466,32 +466,36 @@ describe("Slots", () => {
 		it("Test self-collapsible search is expanded and collapsed by the show-search-field property", () => {
 			cy.mount(
 				<ShellBar id="shellbar" showSearchField={true}>
-					<Search id="search" slot="searchField"></Search>
+					<ShellBarSearch id="search" slot="searchField"></ShellBarSearch>
 				</ShellBar>
 			);
 			cy.get("#search").should("have.prop", "collapsed", false);
 			cy.get("#shellbar").invoke("prop", "showSearchField", false);
 			cy.get("#search").should("have.prop", "collapsed", true);
 		});
 
-
-		it("Test showSearchField property is true when using expanded search field", () => {
+		it("Test showSearchField property is false when using collapsed search field", () => {
 			cy.mount(
 				<ShellBar id="shellbar">
-					<Search id="search" slot="searchField"></Search>
+					<ShellBarSearch id="search" slot="searchField" collapsed></ShellBarSearch>
 				</ShellBar>
 			);
-			cy.get("#search").should("have.prop", "collapsed", false);
-			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", true);
+			cy.get("#search").should("have.prop", "collapsed", true);
+			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false);
 		});
 
-		it("Test showSearchField property is false when using collapsed search field", () => {
+		it("Test search field is collapsed initially instead of being displayed in full width mode", () => {
+			cy.viewport(500, 1080);
 			cy.mount(
-				<ShellBar id="shellbar">
-					<Search id="search" slot="searchField" collapsed></Search>
+				// needs some content to trigger the full width mode
+				<ShellBar id="shellbar" showSearchField={true} showNotifications={true} showProductSwitch={true}>
+					<Button icon={navBack} slot="startButton"></Button>
+					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+					<Button slot="content">Start Button 1</Button>
+
+					<Input id="search" slot="searchField"></Input>
 				</ShellBar>
 			);
-			cy.get("#search").should("have.prop", "collapsed", true);
 			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false);
 		});
 	});

packages/fiori/cypress/specs/ShellBar.mobile.cy.tsx

@@ -0,0 +1,28 @@
+import ShellBar from "../../src/ShellBar.js";
+import ShellBarSearch from "../../src/ShellBarSearch.js";
+
+describe("Mobile Behaviour", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice();
+	});
+
+	it("Test self-collapsible search is expanded and collapsed by the show-search-field property", () => {
+		cy.mount(
+			<ShellBar id="shellbar" showSearchField={true}>
+				<ShellBarSearch id="search" slot="searchField"></ShellBarSearch>
+			</ShellBar>
+		);
+
+		cy.get("#search").should("have.prop", "open", true);
+	});
+
+	it("Test shellbar should have show-search-field when search is open", () => {
+		cy.mount(
+			<ShellBar id="shellbar">
+				<ShellBarSearch id="search" slot="searchField" open={true}></ShellBarSearch>
+			</ShellBar>
+		);
+
+		cy.get("#shellbar").should("have.prop", "showSearchField", true);
+	});
+});

packages/fiori/src/ShellBar.ts

@@ -25,7 +25,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type Input from "@ui5/webcomponents/dist/Input.js";
 import type { IButton } from "@ui5/webcomponents/dist/Button.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import search from "@ui5/webcomponents-icons/dist/search.js";
 import da from "@ui5/webcomponents-icons/dist/da.js";
 import bell from "@ui5/webcomponents-icons/dist/bell.js";
@@ -368,6 +368,16 @@ class ShellBar extends UI5Element {
 	@property({ type: Boolean })
 	showProductSwitch = false;
 
+	/**
+	 * Defines, if the Search Field would be displayed when there is a valid `searchField` slot.
+	 *
+	 * **Note:** By default the Search Field is not displayed.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	showSearchField = false;
+
 	/**
 	 * Defines additional accessibility attributes on different areas of the component.
 	 *
@@ -541,7 +551,9 @@ class ShellBar extends UI5Element {
 	_autoRestoreSearchField = false;
 
 	_headerPress: () => void;
-	_showSearchField = false;
+	onSearchOpen: () => void;
+	onSearchClose: () => void;
+	onSearch: () => void;
 
 	static get FIORI_3_BREAKPOINTS() {
 		return [
@@ -585,6 +597,24 @@ class ShellBar extends UI5Element {
 			}
 		};
 
+		this.onSearchOpen = () => {
+			if (isPhone()) {
+				this.setSearchState(true);
+			}
+		};
+
+		this.onSearchClose = () => {
+			if (isPhone()) {
+				this.setSearchState(false);
+			}
+		};
+
+		this.onSearch = () => {
+			if (!isPhone() && !this.search?.value) {
+				this.setSearchState(!this.showSearchField);
+			}
+		};
+
 		this._handleResize = throttle(() => {
 			this.menuPopover = this._getMenuPopover();
 			this.overflowPopover = this._getOverflowPopover();
@@ -764,35 +794,30 @@ class ShellBar extends UI5Element {
 		});
 
 		this._observeContentItems();
-	}
 
-	/**
-	 * Defines, if the Search Field would be displayed when there is a valid `searchField` slot.
-	 *
-	 * **Note:** By default the Search Field is not displayed.
-	 * @default false
-	 * @public
-	 */
-	@property({ type: Boolean })
-	set showSearchField(value: boolean) {
-		if (isSelfCollapsibleSearch(this.search)) {
-			this.search.collapsed = !value;
+		// search field shouldn't be expanded initially in full width mode
+		if (this.showFullWidthSearch && this._isInitialRendering) {
+			this.setSearchState(false);
+			this._autoRestoreSearchField = true;
 		}
-		this._showSearchField = value;
-	}
 
-	get showSearchField(): boolean {
 		if (isSelfCollapsibleSearch(this.search)) {
-			return !this.search.collapsed;
+			if (isPhone()) {
+				this.search.open = this.showSearchField;
+			} else {
+				this.search.collapsed = !this.showSearchField;
+			}
 		}
-		return this._showSearchField;
 	}
 
 	/**
 	 * Use this method to change the state of the search filed according to internal logic.
 	 * An event is fired to notify the change.
 	 */
 	async setSearchState(expanded: boolean) {
+		if (expanded === this.showSearchField) {
+			return;
+		}
 		this.showSearchField = expanded;
 		await renderFinished();
 		this.fireDecoratorEvent("search-field-toggle", { expanded });
@@ -907,6 +932,13 @@ class ShellBar extends UI5Element {
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResize);
+
+		if (isSelfCollapsibleSearch(this.search)) {
+			this.search.addEventListener("ui5-open", this.onSearchOpen);
+			this.search.addEventListener("ui5-close", this.onSearchClose);
+			this.search.addEventListener("ui5-search", this.onSearch);
+		}
+
 		if (isDesktop()) {
 			this.setAttribute("desktop", "");
 		}
@@ -916,6 +948,12 @@ class ShellBar extends UI5Element {
 		this.contentItemsObserver.disconnect();
 		this._observableContent = [];
 		ResizeHandler.deregister(this, this._handleResize);
+
+		if (isSelfCollapsibleSearch(this.search)) {
+			this.search.removeEventListener("ui5-open", this.onSearchOpen);
+			this.search.removeEventListener("ui5-close", this.onSearchClose);
+			this.search.removeEventListener("ui5-search", this.onSearch);
+		}
 	}
 
 	_handleSearchIconPress() {
@@ -1636,11 +1674,12 @@ class ShellBar extends UI5Element {
 
 interface IShellBarSelfCollapsibleSearch {
 	collapsed: boolean;
+	open: boolean;
 }
 
 const isSelfCollapsibleSearch = (searchField: any): searchField is IShellBarSelfCollapsibleSearch => {
 	if (searchField) {
-		return "collapsed" in searchField;
+		return "collapsed" in searchField && "open" in searchField;
 	}
 	return false;
 };

packages/fiori/src/themes/ShellBar.css

@@ -487,6 +487,10 @@ slot[name="profile"] {
 	width: auto;
 }
 
+.ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
+	max-width: unset;
+}
+
 ::slotted([ui5-input]) {
 	background: var(--_ui5_shellbar_search_field_background);
 	border: var(--_ui5_shellbar_search_field_border);

packages/main/src/themes/ToolbarSelect.css

@@ -0,0 +1,8 @@
+:host(:not([hidden])) {
+	width: 100%;
+}
+
+:host [ui5-select] {
+	width: inherit;
+}
+