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 @@
-
+
{{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);
}