fix(ui5-shellbar): fix search field focus handling (#1636)

**Issue**: the valueStateMsg popover does not show up when the user clicks on the search icon.
**Root cause**: the ShellBar uses a timeout to focus the input to ensure it is displayed and ready to be focused, but sometimes the timeout executes too late. 
- First, the Iinput checks (onAfterRendering) if it should show a valueStateMessage and one of the requirements is to be on focus, which is still false (the timeout is called later) and does not show the popover.
- Then, the timeout is called, moves the focus to the input, but it does not trigger re-rendering and the popover does not show up.
**Solution:** update the state (Input "focused" property) immediately, keep the focus move delayed.

Fixes: #1590

Author: ilhan007

packages/fiori/src/ShellBar.js

@@ -658,11 +658,19 @@ class ShellBar extends UI5Element {
 			"right": right,
 		});
 
-		setTimeout(() => {
-			const inputSlot = searchField.children[0];
 
-			if (inputSlot) {
-				inputSlot.assignedNodes()[0].focus();
+		const inputSlot = searchField.children[0];
+		const input = inputSlot && inputSlot.assignedNodes()[0];
+
+		// update the state immediately
+		if (input) {
+			input.focused = true;
+		}
+
+		// move the focus later
+		setTimeout(() => {
+			if (input) {
+				input.focus();
 			}
 		}, 100);
 	}

packages/fiori/test/pages/ShellBar.html

@@ -120,7 +120,9 @@
 	<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
 	<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
 
-	<ui5-input slot="searchField"></ui5-input>
+	<ui5-input placeholder="Instructions" slot="searchField" show-suggestions value-state="Information">
+		<div slot="valueStateMessage">Instructions</div>
+	</ui5-input>
 
 	<ui5-li id="menu-item-1" slot="menuItems" data-key="key1">Application 1</ui5-li>
 	<ui5-li id="menu-item-2" slot="menuItems" data-key="key2">Application 2</ui5-li>
@@ -184,7 +186,8 @@ <h3>ShellBar in Compact</h3>
 
 
 <ui5-shellbar>
-	<ui5-input id="mySearch" slot="searchField" show-suggestions>
+	<ui5-input id="mySearch" slot="searchField" show-suggestions value-state="Information">
+		<div slot="valueStateMessage">Instructions</div>
 		<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">1</ui5-li>
 		<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">2</ui5-li>
 		<ui5-li icon="world" description="travel the world" info="explore" info-state="Success">3</ui5-li>

packages/fiori/test/specs/ShellBar.spec.js

@@ -296,7 +296,7 @@ describe("Component Behavior", () => {
 
 			it("tests if searchfield toggles when clicking on search icon", () => {
 				const searchIcon = browser.$("#shellbar").shadow$(".ui5-shellbar-search-button");
-				const searchField = browser.$("#shellbar ui5-input");
+				const searchField = browser.$("#shellbar").shadow$(".ui5-shellbar-search-field");
 
 				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden by default");
 
@@ -379,7 +379,7 @@ describe("Component Behavior", () => {
 
 			it("tests if searchfield toggles when clicking on search icon", () => {
 				const overflowButton = browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
-				const searchField = browser.$("#shellbar ui5-input");
+				const searchField = browser.$("#shellbar").shadow$(".ui5-shellbar-search-field");
 				const staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
 				const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
 				const searchListItem = overflowPopover.$("ui5-list ui5-li:nth-child(1)");

packages/main/src/Input.js

@@ -479,7 +479,7 @@ class Input extends UI5Element {
 
 			if (!isPhone() && shouldOpenSuggestions) {
 				// Set initial focus to the native input
-				this.inputDomRef.focus();
+				this.inputDomRef && this.inputDomRef.focus();
 			}
 		}
 
@@ -545,7 +545,7 @@ class Input extends UI5Element {
 		this.previousValue = this.value;
 
 		await this.getInputDOMRef();
-		this._inputIconFocused = event.target === this.querySelector("ui5-icon");
+		this._inputIconFocused = event.target && event.target === this.querySelector("ui5-icon");
 	}
 
 	_onfocusout(event) {