EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2020-06-23 15:04:54 +02:00
parent 206afd7505
commit 8f21507b78
3 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/search/components/search-box/core-search-box.html
View File

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

7
src/core/search/components/search-box/search-box.scss
View File

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

14
src/core/search/components/search-box/search-box.ts
View File

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