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 be186a40b..58b13bb4c 100644
--- a/src/core/search/components/search-box/core-search-box.html
+++ b/src/core/search/components/search-box/core-search-box.html
@@ -1,7 +1,7 @@
<ion-card>
<form #f="ngForm" (ngSubmit)="submitForm($event)" role="search" #searchForm>
<ion-item>
- <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (focus)="showHistory()" (blur)="hideHistory()"></ion-input>
+ <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"></ion-input>
<button item-end ion-button clear icon-only type="submit" class="button-small" [attr.aria-label]="searchLabel" [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
<ion-icon name="search"></ion-icon>
</button>
@@ -9,13 +9,11 @@
<ion-icon name="close"></ion-icon>
</button>
</ion-item>
- <div class="core-search-history" *ngIf="historyShown && history.length">
- <ion-list class="with-borders">
- <ion-item text-wrap *ngFor="let item of history" (mousedown)="itemMouseDown($event, item.searchedtext)" (mouseup)="itemMouseUp($event, item.searchedtext)" class="core-clickable">
- <core-icon name="fa-history" item-start></core-icon>
- {{item.searchedtext}}
- </ion-item>
- </ion-list>
- </div>
+ <ion-list class="core-search-history with-borders">
+ <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}}
+ </a>
+ </ion-list>
</form>
</ion-card>
diff --git a/src/core/search/components/search-box/search-box.scss b/src/core/search/components/search-box/search-box.scss
index 58eab7287..a800669ef 100644
--- a/src/core/search/components/search-box/search-box.scss
+++ b/src/core/search/components/search-box/search-box.scss
@@ -22,12 +22,8 @@ ion-app.app-root core-search-box {
padding-left: 0 !important;
}
- .item-wp .text-input {
- border: 0;
- margin: 0;
- }
-
.core-search-history {
+ display: none;
max-height: calc(-120px + 80vh);
overflow-y: auto;
@@ -39,4 +35,10 @@ 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 2826043a1..f41742eab 100644
--- a/src/core/search/components/search-box/search-box.ts
+++ b/src/core/search/components/search-box/search-box.ts
@@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, ViewChild, ElementRef } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
@@ -34,7 +34,7 @@ import { CoreSearchHistoryProvider, CoreSearchHistoryItem } from '../../provider
selector: 'core-search-box',
templateUrl: 'core-search-box.html'
})
-export class CoreSearchBoxComponent implements OnInit, OnDestroy {
+export class CoreSearchBoxComponent implements OnInit {
@Input() searchLabel?: string; // Label to be used on action button.
@Input() placeholder?: string; // Placeholder text for search text input.
@Input() autocorrect = 'on'; // Enables/disable Autocorrection on search text input.
@@ -57,9 +57,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
history: CoreSearchHistoryItem[] = [];
historyShown = false;
- protected elementClicked = '';
- protected backdropMouseUpFunc;
-
constructor(protected translate: TranslateService,
protected utils: CoreUtilsProvider,
protected searchHistoryProvider: CoreSearchHistoryProvider,
@@ -80,8 +77,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
if (this.searchArea) {
this.loadHistory();
-
- this.backdropMouseUpFunc = this.backdropMouseUp.bind(this);
}
}
@@ -132,72 +127,17 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
this.history = await this.searchHistoryProvider.getSearchHistory(this.searchArea);
}
- /**
- * Show search history.
- */
- showHistory(): void {
- if (this.searchArea) {
- this.historyShown = true;
- this.elementClicked = '';
- document.body.addEventListener('mouseup', this.backdropMouseUpFunc);
- }
- }
-
- /**
- * Hide search history.
- *
- * @param force: If force hidding the history without checking the clicked element.
- */
- hideHistory(force: boolean = false): void {
- if (this.searchArea && (force || this.elementClicked == '')) {
- this.historyShown = false;
- this.elementClicked = '';
-
- document.body.removeEventListener('mouseup', this.backdropMouseUpFunc);
- }
- }
-
- /**
- * Saves the item where you moused down.
- * It uses mouseup/down because blur will block the click event.
- *
- * @param e Event.
- * @param text Selected text.
- */
- itemMouseDown(e: Event, text: string): void {
- this.elementClicked = text;
- }
-
/**
* Select an item and use it for search text.
- * It uses mouseup/down because blur will block the click event.
*
* @param e Event.
* @param text Selected text.
*/
- itemMouseUp(e: Event, text: string): void {
- if (this.elementClicked == text) {
- this.hideHistory(true);
- if (this.searched != text) {
- this.searchText = text;
- this.submitForm(e);
- }
+ historyClicked(e: Event, text: string): void {
+ if (this.searched != text) {
+ this.searchText = text;
+ this.submitForm(e);
}
- this.elementClicked = '';
- }
-
- /**
- * Manages mouseup out of the history.
- *
- * @param e Event.
- */
- backdropMouseUp(e: Event): void {
- // Do not hide if the search box is focused.
- if (document.activeElement['type'] && document.activeElement['type'] == 'search') {
- return;
- }
- this.hideHistory();
- this.elementClicked = '';
}
/**
@@ -206,16 +146,6 @@ export class CoreSearchBoxComponent implements OnInit, OnDestroy {
clearForm(): void {
this.searched = '';
this.searchText = '';
- this.hideHistory(true);
this.onClear.emit();
}
-
- /**
- * On destroy of the component, clear up any listeners.
- */
- ngOnDestroy(): void {
- if (this.backdropMouseUpFunc) {
- document.body.removeEventListener('mouseup', this.backdropMouseUpFunc);
- }
- }
}