fix: search button shows/hide with correct priority

Author: dobrinyonkov

packages/fiori/cypress/downloads/downloads.html

@@ -616,6 +616,62 @@ describe("Slots", () => {
 				.find("[slot='searchField']")
 				.should("be.visible");
 		});
+
+		it("Test search button hide/show priority", () => {
+			cy.mount(
+				<ShellBar 
+					id="shellbar" 
+					primaryTitle="Product Title"
+					showNotifications={true}
+					showProductSwitch={true}
+					showSearchField={false}
+				>
+					<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" />
+					<Button id="content1" slot="content">Content 1</Button>
+					<Button id="content2" slot="content">Content 2</Button>
+					<ShellBarSearch slot="searchField"></ShellBarSearch>
+					<ShellBarItem icon={activities} id="action1" text="Action 1"></ShellBarItem>
+					<ShellBarItem icon={activities} id="action2" text="Action 2"></ShellBarItem>
+					<ShellBarItem icon={activities} id="action3" text="Action 3"></ShellBarItem>
+					<Avatar slot="profile">
+						<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+					</Avatar>
+				</ShellBar>
+			);
+
+			cy.get("#shellbar").as("shellbar");
+
+			// wide viewport - search, content, actions all visible
+			cy.viewport(1200, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			// Assert all elements are visible
+			cy.get("@shellbar").shadow().find(".ui5-shellbar-search-toggle").should("be.visible");
+			cy.get("#content1").should("be.visible");
+			cy.get("#content2").should("be.visible");
+
+			cy.get("#action1").should("be.visible");
+			cy.get("#action2").should("be.visible");
+			cy.get("#action3").should("be.visible");
+
+
+			// Act - reduce viewport to hide action buttons
+			cy.get("@shellbar").invoke("prop", "showSearchField", false);
+			cy.viewport(350, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			// Assert action buttons are hidden and search are hidden, before the last content item
+			cy.get("@shellbar").shadow().find(".ui5-shellbar-search-toggle").should("not.be.visible");
+			cy.get("#content1").should("be.visible");
+
+			// Act - increase viewport
+			cy.viewport(400, 800);
+			cy.wait(RESIZE_THROTTLE_RATE);
+
+			// Assert search is visible again before with highest priority
+			cy.get("#content1").should("be.visible");
+			cy.get("@shellbar").shadow().find(".ui5-shellbar-search-toggle").should("be.visible");
+		});
 	});
 });
 

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

@@ -4,10 +4,10 @@ import type { ShellBarV2ActionId, ShellBarV2ActionItem } from "../ShellBarV2.js"
 
 interface ShellBarV2HidableItem {
 	id: string;
-	selector: string; // CSS selector to find the element
-	hideOrder: number;
-	keepHidden: boolean;
-	showInOverflow?: boolean; // If true, hiding this item triggers overflow button
+	selector: string; 			// CSS selector to find the element
+	hideOrder: number;			// Priority for hiding - later adjusted based on search field state
+	keepHidden: boolean; 		// Keep item hidden to prevent flickering when searchfield expands/collapses
+	showInOverflow?: boolean; 	// If true, hiding this item triggers overflow button
 }
 
 interface ShellBarV2OverflowParams {
@@ -40,16 +40,16 @@ type ShellBarV2OverflowItem = {
 
 class ShellBarV2Overflow {
 	private readonly CLOSED_SEARCH_STRATEGY = {
-		ACTIONS: 0,			// All actions first
+		ACTIONS: 0,			// All actions hide first
 		CONTENT: 1000,		// Then content (except last)
 		SEARCH: 2000,		// Then search button
-		LAST_CONTENT: 3000,	// Last content item protected
+		LAST_CONTENT: 3000,	// Last content item hides last
 	};
 
 	private readonly OPEN_SEARCH_STRATEGY = {
-		CONTENT: 0, 		// All content first
+		CONTENT: 0, 		// All content hide first
 		ACTIONS: 1000,		// All actions next
-		SEARCH: 2000,		// Search after all actions
+		SEARCH: 2000,		// Then search button
 		LAST_CONTENT: 0,	// Last content same as other content
 	};
 
@@ -145,7 +145,7 @@ class ShellBarV2Overflow {
 				id: slotName,
 				selector: `#${slotName}`,
 				hideOrder: priority + dataHideOrder,
-				keepHidden: false,
+				keepHidden: false, // Content items don't cause flickering
 				showInOverflow: false,
 			});
 		});
@@ -191,7 +191,7 @@ class ShellBarV2Overflow {
 				id: ShellBarV2Actions.Search,
 				selector: ShellBarV2ActionsSelectors.Search,
 				hideOrder: overflowStrategy.SEARCH + actionIndex++,
-				keepHidden: hiddenItemsIds.includes(ShellBarV2Actions.Search),
+				keepHidden: false, // Search button can be shown/hidden freely
 				showInOverflow: true,
 			});
 		}