fix(ui5-shellbar): correct search visibility toggle (#11724)

This PR fixes an issue where "delayed" search fields weren’t supported. Instead of attaching events to the search field, in just the onEnterDOM hook they’re now attached refreshed in the the ShellBar's onBeforeRendering hook. A validation check is also added in every handler to ensure that shellbar is not' reacting on already removed search fields. This change improves event handling and adds a test for dynamic search fields.

Author: dobrinyonkov

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

@@ -498,6 +498,39 @@ describe("Slots", () => {
 			);
 			cy.get("#shellbar").invoke("prop", "showSearchField").should("equal", false);
 		});
+
+		it("Test search field added after delay still works with events", () => {
+			cy.mount(
+				<ShellBar id="shellbar" primaryTitle="Product Title" showNotifications={true}></ShellBar>
+			);
+			
+			cy.get("#shellbar").as("shellbar");
+			
+			// Add search field after a timeout (simulating real-world scenario)
+			cy.get("@shellbar").then(shellbar => {
+				setTimeout(() => {
+					const searchField = document.createElement("ui5-shellbar-search");
+					searchField.setAttribute("slot", "searchField");
+					searchField.setAttribute("id", "delayed-search");
+					shellbar.get(0).appendChild(searchField);
+				}, 100);
+			});
+			
+			// Wait for the search field to be added
+			cy.get("#delayed-search", { timeout: 1000 }).should("exist");
+			
+			// Search should now be visible and collapsed
+			cy.get("#shellbar [slot='searchField']")
+				.should("exist")
+				.should("have.prop", "collapsed", true);
+			
+			// click the searchField to expand it
+			cy.get("#shellbar [slot='searchField']")
+				.click()
+				.should("have.prop", "collapsed", false);
+			// check shellbar's showSearchField property is also updated
+			cy.get("@shellbar").invoke("prop", "showSearchField").should("equal", true);
+		});
 	});
 });
 

packages/fiori/src/ShellBar.ts

@@ -553,10 +553,11 @@ class ShellBar extends UI5Element {
 	_observableContent: Array<HTMLElement> = [];
 	_autoRestoreSearchField = false;
 
+	_onSearchOpenBound = this._onSearchOpen.bind(this);
+	_onSearchCloseBound = this._onSearchClose.bind(this);
+	_onSearchBound = this._onSearch.bind(this);
+
 	_headerPress: () => void;
-	onSearchOpen: () => void;
-	onSearchClose: () => void;
-	onSearch: () => void;
 
 	static get FIORI_3_BREAKPOINTS() {
 		return [
@@ -600,24 +601,6 @@ 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();
@@ -631,6 +614,36 @@ class ShellBar extends UI5Element {
 		}, RESIZE_THROTTLE_RATE);
 	}
 
+	_onSearchOpen(e: Event) {
+		if (e.target !== this.search) {
+			this._detachSearchFieldListeners(e.target as HTMLElement);
+			return;
+		}
+		if (isPhone()) {
+			this.setSearchState(true);
+		}
+	}
+
+	_onSearchClose(e: Event) {
+		if (e.target !== this.search) {
+			this._detachSearchFieldListeners(e.target as HTMLElement);
+			return;
+		}
+		if (isPhone()) {
+			this.setSearchState(false);
+		}
+	}
+
+	_onSearch(e: Event) {
+		if (e.target !== this.search) {
+			this._detachSearchFieldListeners(e.target as HTMLElement);
+			return;
+		}
+		if (!isPhone() && !this.search?.value) {
+			this.setSearchState(!this.showSearchField);
+		}
+	}
+
 	_updateSearchFieldState() {
 		const spacerWidth = this.shadowRoot!.querySelector(".ui5-shellbar-spacer") ? this.shadowRoot!.querySelector(".ui5-shellbar-spacer")!.getBoundingClientRect().width : 0;
 		const searchFieldWidth = this.domCalculatedValues("--_ui5_shellbar_search_field_width");
@@ -823,6 +836,9 @@ class ShellBar extends UI5Element {
 			} else {
 				this.search.collapsed = !this.showSearchField;
 			}
+
+			this._detachSearchFieldListeners(this.search);
+			this._attachSearchFieldListeners(this.search);
 		}
 	}
 
@@ -949,27 +965,35 @@ 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", "");
 		}
+		this._attachSearchFieldListeners(this.search);
 	}
 
 	onExitDOM() {
 		this.contentItemsObserver.disconnect();
 		this._observableContent = [];
 		ResizeHandler.deregister(this, this._handleResize);
+		this._detachSearchFieldListeners(this.search);
+	}
 
-		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);
+	_attachSearchFieldListeners(searchField: HTMLElement | null) {
+		if (!searchField) {
+			return;
+		}
+		searchField.addEventListener("ui5-open", this._onSearchOpenBound);
+		searchField.addEventListener("ui5-close", this._onSearchCloseBound);
+		searchField.addEventListener("ui5-search", this._onSearchBound);
+	}
+
+	_detachSearchFieldListeners(searchField: HTMLElement | null) {
+		if (!searchField) {
+			return;
 		}
+		searchField.removeEventListener("ui5-open", this._onSearchOpenBound);
+		searchField.removeEventListener("ui5-close", this._onSearchCloseBound);
+		searchField.removeEventListener("ui5-search", this._onSearchBound);
 	}
 
 	_handleSearchIconPress() {
@@ -1687,7 +1711,7 @@ class ShellBar extends UI5Element {
 	}
 }
 
-interface IShellBarSelfCollapsibleSearch {
+interface IShellBarSelfCollapsibleSearch extends UI5Element {
 	collapsed: boolean;
 	open: boolean;
 }