From 8f21507b78413f1e817f0ca33112879580cda68e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 23 Jun 2020 15:04:54 +0200
Subject: [PATCH] MOBILE-3401 search: Show/hide search history checking focus

---
 .../components/search-box/core-search-box.html     |  2 +-
 .../search/components/search-box/search-box.scss   |  7 -------
 .../search/components/search-box/search-box.ts     | 14 ++++++++++++++
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/core/search/components/search-box/core-search-box.html b/src/core/search/components/search-box/core-search-box.html
index 58b13bb4c..1a14ad003 100644
--- a/src/core/search/components/search-box/core-search-box.html
+++ b/src/core/search/components/search-box/core-search-box.html
@@ -9,7 +9,7 @@
                 <ion-icon name="close"></ion-icon>
             </button>
         </ion-item>
-        <ion-list class="core-search-history with-borders">
+        <ion-list class="core-search-history with-borders" [hidden]="!historyShown">
             <a ion-item text-wrap *ngFor="let item of history" (click)="historyClicked($event, item.searchedtext)" class="core-clickable" tabindex="1">
                 <core-icon name="fa-history" item-start></core-icon>
                 {{item.searchedtext}}
diff --git a/src/core/search/components/search-box/search-box.scss b/src/core/search/components/search-box/search-box.scss
index a800669ef..311e796fc 100644
--- a/src/core/search/components/search-box/search-box.scss
+++ b/src/core/search/components/search-box/search-box.scss
@@ -23,7 +23,6 @@ ion-app.app-root core-search-box {
     }
 
     .core-search-history {
-        display: none;
         max-height: calc(-120px + 80vh);
         overflow-y: auto;
 
@@ -35,10 +34,4 @@ ion-app.app-root core-search-box {
             border-bottom: 0;
         }
     }
-
-    form:focus-within {
-        .core-search-history {
-            display: block;
-        }
-    }
 }
diff --git a/src/core/search/components/search-box/search-box.ts b/src/core/search/components/search-box/search-box.ts
index 8a3116c14..7ec64c7d9 100644
--- a/src/core/search/components/search-box/search-box.ts
+++ b/src/core/search/components/search-box/search-box.ts
@@ -78,6 +78,19 @@ export class CoreSearchBoxComponent implements OnInit {
         if (this.searchArea) {
             this.loadHistory();
         }
+
+        this.formElement.nativeElement.addEventListener('focus', () => {
+            this.historyShown = true;
+        }, true);
+
+        this.formElement.nativeElement.addEventListener('blur', () => {
+            // Wait the new element to be focused.
+            setTimeout(() => {
+                if (document.activeElement.closest('form') != this.formElement.nativeElement) {
+                    this.historyShown = false;
+                }
+            });
+        }, true);
     }
 
     /**
@@ -100,6 +113,7 @@ export class CoreSearchBoxComponent implements OnInit {
 
         this.domUtils.triggerFormSubmittedEvent(this.formElement, false, this.sitesProvider.getCurrentSiteId());
 
+        this.historyShown = false;
         this.searched = this.searchText;
         this.onSubmit.emit(this.searchText);
     }