feat: Close keyboard after Enter/Next on mobile device (#19)

ngxtools · Nov 22, 2018 · 45c79bc · 45c79bc
1 parent 7af13f8
commit 45c79bc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/app/search/search/search.component.html b/src/app/search/search/search.component.html
@@ -1,6 +1,6 @@
 <section class="ngxtools-palette-warn" aria-label="Search for package by name">
   <form [formGroup]="searchForm" class="ngxtools-palette-primary-border ngxtools-palette-primary-text">
-    <input (keydown.enter)="noop($event)" aria-label="Enter your search query" class="input__search ngxtools-palette-accent-text" formControlName="query" placeholder="search packages...">
+    <input (keydown.enter)="closeMobileBeyboard();noop($event);" aria-label="Enter your search query" class="input__search ngxtools-palette-accent-text" formControlName="query" placeholder="search packages..." #queryInput>
     <button class="button__clear ngxtools-palette-accent-text" mat-button [hidden]="!searchForm.controls.query.value" mat-icon-button
       aria-label="Clear" (click)="clear()">
       <mat-icon>close</mat-icon>

diff --git a/src/app/search/search/search.component.ts b/src/app/search/search/search.component.ts
@@ -18,6 +18,8 @@ export class SearchComponent implements OnInit, AfterContentInit {
   hasReachedLastPage = false;
 
   @ViewChild('resultContainerRef') resultContainerRef: ElementRef;
+  @ViewChild('queryInput') queryInput: ElementRef;
+
   constructor(private algolia: AlgoliaService, private route: ActivatedRoute, private deeplink: DeeplinkService) {
     this.searchForm = new FormGroup({
       query: new FormControl('')
@@ -46,7 +48,7 @@ export class SearchComponent implements OnInit, AfterContentInit {
     this.algolia.searchState.result$.subscribe(results => {
       this.hasReachedLastPage = results.page + 1 === results.nbPages;
 
-      if(results.query !== this.currentQuery){
+      if (results.query !== this.currentQuery) {
         this.currentQuery = results.query;
         this.packages = [];
       }
@@ -84,8 +86,8 @@ export class SearchComponent implements OnInit, AfterContentInit {
     return this.searchForm.controls.query.value && this.packages.length === 0;
   }
 
-  loadNextPage(){
-    if(!this.hasReachedLastPage) {
+  loadNextPage() {
+    if (!this.hasReachedLastPage) {
       this.algolia.nextPage();
     }
   }
@@ -99,4 +101,12 @@ export class SearchComponent implements OnInit, AfterContentInit {
     keypressEvent.stopPropagation();
     return false;
   }
+
+  /**
+   * Close keyboard on mobile device
+   */
+  closeMobileBeyboard() {
+    this.queryInput.nativeElement.blur();
+  }
+
 }