From 45c79bc70e1d6fb53103fe90477fba31a423b867 Mon Sep 17 00:00:00 2001
From: Harald Nezbeda <harry@5c.ro>
Date: Thu, 22 Nov 2018 17:23:29 +0100
Subject: [PATCH] feat: Close keyboard after Enter/Next on mobile device (#19)

---
 src/app/search/search/search.component.html |  2 +-
 src/app/search/search/search.component.ts   | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/search/search/search.component.html b/src/app/search/search/search.component.html
index 753b061..e9de5ac 100644
--- 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
index f60c1c5..616efa2 100644
--- 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();
+  }
+
 }