MOBILE-3401 search: Show/hide search history checking focus

Author: crazyserver

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}}

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;
-        }
-    }
 }

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);
     }