feat(ui5-shellbar): introduce async search btn getter (#11338)

The `searchButtonDomRef` has been refactored into an asynchronous method `getSearchButtonDomRef` that waits for the component to finish rendering. This ensures the DOM is available for use cases that require focusing the search button.

A similar code has been applied to the `search-field-toggle` event, which is now fired after rendering is complete.

Author: dobrinyonkov

packages/fiori/src/ShellBar.ts

@@ -791,8 +791,9 @@ class ShellBar extends UI5Element {
 	 * Use this method to change the state of the search filed according to internal logic.
 	 * An event is fired to notify the change.
 	 */
-	setSearchState(expanded: boolean) {
+	async setSearchState(expanded: boolean) {
 		this.showSearchField = expanded;
+		await renderFinished();
 		this.fireDecoratorEvent("search-field-toggle", { expanded });
 	}
 
@@ -1057,11 +1058,12 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the `search` icon DOM ref.
+	 * @returns The search icon DOM ref
 	 * @public
-	 * @default null
 	 * @since 2.10.0
 	 */
-	get searchButtonDomRef(): HTMLElement | null {
+	async getSearchButtonDomRef(): Promise<HTMLElement | null> {
+		await renderFinished();
 		return this.shadowRoot!.querySelector<HTMLElement>(`*[data-ui5-stable="toggle-search"]`);
 	}
 

packages/fiori/test/pages/ShellBar_evolution.html

@@ -244,8 +244,7 @@
 		shellbar.addEventListener("content-item-visibility-change", (e) => {
 			console.log(e.detail.items);
 		})
-
-
+		
 		const menuSubsDynamic = document.getElementById("menuSubsDynamic");
 		const btnOpenBasicDynamic = document.getElementById("btnOpenBasicDynamic");
 
@@ -304,15 +303,16 @@
 		});
 
 		shellbar_hide_search.addEventListener('ui5-search-button-click', async (e) => {
-			await window["sap-ui-webcomponents-bundle"].renderFinished();
-			customSearchInput.focus();
+			shellbar_hide_search.addEventListener('ui5-search-field-toggle', async (e) => {
+				customSearchInput.focus();
+			}, { once: true });
 		});
 
 		customSearchClose.addEventListener('click', async () => {
 			shellbar_hide_search.showSearchField = false;
 			shellbar_hide_search.hideSearchButton = false;
-			await window["sap-ui-webcomponents-bundle"].renderFinished();
-			shellbar_hide_search.searchButtonDomRef.focus();
+			const searchButton = await shellbar_hide_search.getSearchButtonDomRef()
+			searchButton.focus();
 		});
 	</script>