From 0c73f688e996098f4a709755abf364d91282a7ff Mon Sep 17 00:00:00 2001
From: marination <maricadsouza221197@gmail.com>
Date: Wed, 2 Jun 2021 18:32:35 +0530
Subject: [PATCH] fix: Search UI open/close and Empty product search results

---
 erpnext/e_commerce/product_search.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/erpnext/e_commerce/product_search.js b/erpnext/e_commerce/product_search.js
index 605594b455..037878b63c 100644
--- a/erpnext/e_commerce/product_search.js
+++ b/erpnext/e_commerce/product_search.js
@@ -18,14 +18,24 @@ erpnext.ProductSearch = class {
 	bindSearchAction() {
 		let me = this;
 
+		// Show Search dropdown
 		this.searchBox.on("focus", () => {
 			this.search_dropdown.removeClass("hidden");
 		});
 
-		this.searchBox.on("focusout", () => {
-			this.search_dropdown.addClass("hidden");
+		// If click occurs outside search input/results, hide results.
+		// Click can happen anywhere on the page
+		$("body").on("click", (e) => {
+			let searchEvent = $(e.target).closest('#search-box').length;
+			let resultsEvent = $(e.target).closest('#search-results-container').length;
+			let isResultHidden = this.search_dropdown.hasClass("hidden");
+
+			if (!searchEvent && !resultsEvent && !isResultHidden) {
+				this.search_dropdown.addClass("hidden");
+			}
 		});
 
+		// Process search input
 		this.searchBox.on("input", (e) => {
 			let query = e.target.value;
 
@@ -178,7 +188,12 @@ erpnext.ProductSearch = class {
 
 	populateResults(data) {
 		if (data.message.results.length === 0) {
-			this.products_container.html('No results');
+			let empty_html = `
+				<div class="mt-6 w-100 text-muted" style="font-weight: 400; text-align: center;">
+					${ __('No results') }
+				</div>
+			`;
+			this.products_container.html(empty_html);
 			return;
 		}