fix(ui5-shellbar): fix search field behavior (#1264)

- fix: search field suggestions popup used to open in the left most corner
- fix: clicking on suggestions did not take effect due to pop up reposition

Root cause: the search field used to close upon interaction with the items in the popover, forcing the popover to reposition itself without knowing the DOM ref of  its opener.

Solution: the search field is now toggled only by clicking the search icon.

Author: ilhan007

packages/fiori/src/ShellBar.hbs

@@ -70,13 +70,9 @@
 		</div>
 	</div>
 
-	<div class="ui5-shellbar-block-layer">
-	</div>
-
 	<div id="{{_id}}-searchfield-wrapper"
 		class="ui5-shellbar-search-field"
 		style="{{styles.searchField}}"
-		@focusout={{_searchField.focusout}}
 	>
 		{{#if searchField.length}}
 			<slot name="searchField"></slot>

packages/fiori/src/ShellBar.js

@@ -5,7 +5,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { isSpace, isEscape } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
+import { isSpace } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
@@ -115,7 +115,7 @@ const metadata = {
 		/**
 		 * @private
 		 */
-		showBlockLayer: {
+		showSearchField: {
 			type: Boolean,
 		},
 
@@ -440,9 +440,6 @@ class ShellBar extends UI5Element {
 
 		this._searchField = {
 			left: 0,
-			focusout: event => {
-				this.showBlockLayer = false;
-			},
 		};
 
 		this._handleResize = event => {
@@ -636,27 +633,11 @@ class ShellBar extends UI5Element {
 	}
 
 	_onkeydown(event) {
-		if (isEscape(event)) {
-			return this._handleEscape(event);
-		}
-
 		if (isSpace(event)) {
 			event.preventDefault();
 		}
 	}
 
-	_handleEscape() {
-		const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
-
-		if (this.showBlockLayer) {
-			this.showBlockLayer = false;
-
-			setTimeout(() => {
-				searchButton.focus();
-			}, 0);
-		}
-	}
-
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResize);
 	}
@@ -666,6 +647,12 @@ class ShellBar extends UI5Element {
 	}
 
 	_handleSearchIconPress(event) {
+		this.showSearchField = !this.showSearchField;
+
+		if (!this.showSearchField) {
+			return;
+		}
+
 		const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`);
 		const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
@@ -683,8 +670,6 @@ class ShellBar extends UI5Element {
 			"right": right,
 		});
 
-		this.showBlockLayer = true;
-
 		setTimeout(() => {
 			const inputSlot = searchField.children[0];
 

packages/fiori/src/themes/ShellBar.css

@@ -298,7 +298,7 @@ slot[name="profile"] {
 	cursor: pointer;
 }
 
-:host(:not([show-block-layer])) .ui5-shellbar-search-field {
+:host(:not([show-search-field])) .ui5-shellbar-search-field {
 	display: none;
 }
 
@@ -348,20 +348,6 @@ ui5-icon[data-count]::before {
 	margin-left: 0.5rem;
 }
 
-.ui5-shellbar-block-layer {
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	position: fixed;
-	outline: 0 none;
-	z-index: 100;
-}
-
-:host(:not([show-block-layer])) .ui5-shellbar-block-layer {
-	display: none;
-}
-
 .ui5-shellbar-search-field {
 	z-index: 101;
 	position: absolute;
@@ -386,12 +372,6 @@ ui5-icon[data-count]::before {
 	outline: 1px dotted var(--sapContent_ContrastFocusColor);
 }
 
-:host([show-block-layer]) .ui5-shellbar-search-button {
-	background: var(--sapHighlightColor);
-	color: var(--sapShell_Active_TextColor);
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
 
 .ui5-shellbar-co-pilot-placeholder {
 	width: 2.75rem;

packages/fiori/test/pages/ShellBar.html

@@ -181,7 +181,20 @@ <h3>ShellBar in Compact</h3>
 <ui5-input id="press-input" style="margin-top: 2rem;"></ui5-input>
 <ui5-input id="press-input2" style="margin-top: 2rem;"></ui5-input>
 
+
+<ui5-shellbar>
+	<ui5-input id="mySearch" slot="searchField" show-suggestions>
+		<ui5-li>1</ui5-li>
+		<ui5-li>2</ui5-li>
+		<ui5-li>3</ui5-li>
+	</ui5-input>
+</ui5-shellbar>
+
 <script>
+	mySearch.addEventListener("suggestionItemSelect", function (event) {
+		 console.log(event);
+	});
+
 	shellbar.addEventListener("ui5-profileClick", function(event) {
 		popover.openBy(event.detail.targetRef);
 		window["press-input"].value = "Profile";

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

@@ -272,19 +272,17 @@ describe("Component Behavior", () => {
 				assert.strictEqual(input.getValue(), "Application 2", "Input value is set by click event of the second menu item");
 			});
 
-			it("tests if searchfield appears when clicking on search icon", () => {
+			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 blockLayer = browser.$("#shellbar").shadow$(".ui5-shellbar-block-layer");
 
 				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden by default");
 
 				searchIcon.click();
 				assert.strictEqual(searchField.isDisplayed(), true, "Search is visible after clicking on icon");
 
-				// focus out the input
-				blockLayer.click();
-				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden when focussed out");
+				searchIcon.click();
+				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden after clicking again on the icon");
 			});
 		});
 
@@ -345,25 +343,23 @@ describe("Component Behavior", () => {
 				assert.strictEqual(input.getValue(), "Product Switch", "Input value is set by click event of Product Switch icon");
 			});
 
-			it("tests if searchfield appears when clicking on search icon", () => {
+			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 staticAreaItemClassName = browser.getStaticAreaItemClassName("#shellbar")
 				const overflowPopover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
 				const searchListItem = overflowPopover.$("ui5-list ui5-li:nth-child(1)");
-				const blockLayer = browser.$("#shellbar").shadow$(".ui5-shellbar-block-layer");
-				
 
 				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden by default");
 
 				overflowButton.click();
 				searchListItem.click();
 
-				assert.strictEqual(searchField.isDisplayed(), true, "Search is visible after clicking on icon");
+				assert.strictEqual(searchField.isDisplayed(), true, "Search is visible after clicking on the search icon within the overflow");
 
-				// focus out the input
-				blockLayer.click();
-				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden when focussed out");
+				overflowButton.click();
+				searchListItem.click();
+				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden after clicking on the search icon agian");
 			});
 		});
 	});