From 7caa0a8aa46aae05102e82ba68b268c2c392f856 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Mon, 12 Jun 2017 23:12:28 +0100
Subject: [PATCH] fix(aio): show search results when search box gets focus

Due to a previous commit, the search was only triggered
if the query changed, and not when the search box regained
focus.
---
 aio/src/app/app.component.html                |  2 +-
 aio/src/app/app.component.spec.ts             |  7 +++++++
 .../search-box/search-box.component.spec.ts   |  7 ++++---
 .../search/search-box/search-box.component.ts | 19 ++++++++++++-------
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 7aef453b5e..22127e12c2 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -11,7 +11,7 @@
   </button>
   <a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
   <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
-  <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)"></aio-search-box>
+  <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
 </md-toolbar>
 <aio-search-results #searchResults *ngIf="showSearchResults" (resultSelected)="hideSearchResults()"></aio-search-results>
 
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index bb706a5793..c076632c38 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -723,6 +723,13 @@ describe('AppComponent', () => {
           fixture.detectChanges();
           expect(component.showSearchResults).toBe(false);
         });
+
+        it('should re-run the search when the search box regains focus', () => {
+          const doSearchSpy = spyOn(component, 'doSearch');
+          const searchBox = fixture.debugElement.query(By.directive(SearchBoxComponent));
+          searchBox.triggerEventHandler('onFocus', 'some query');
+          expect(doSearchSpy).toHaveBeenCalledWith('some query');
+        });
       });
     });
 
diff --git a/aio/src/app/search/search-box/search-box.component.spec.ts b/aio/src/app/search/search-box/search-box.component.spec.ts
index 075b0278a1..3c7012c87d 100644
--- a/aio/src/app/search/search-box/search-box.component.spec.ts
+++ b/aio/src/app/search/search-box/search-box.component.spec.ts
@@ -7,10 +7,11 @@ import { LocationService } from 'app/shared/location.service';
 import { MockLocationService } from 'testing/location.service';
 
 @Component({
-  template: '<aio-search-box (onSearch)="searchHandler($event)"></aio-search-box>'
+  template: '<aio-search-box (onSearch)="searchHandler($event)" (onFocus)="focusHandler($event)"></aio-search-box>'
 })
 class HostComponent {
   searchHandler = jasmine.createSpy('searchHandler');
+  focusHandler = jasmine.createSpy('focusHandler');
 }
 
 describe('SearchBoxComponent', () => {
@@ -63,11 +64,11 @@ describe('SearchBoxComponent', () => {
   });
 
   describe('on focus', () => {
-    it('should trigger the onSearch event', () => {
+    it('should trigger the onFocus event', () => {
       const input = fixture.debugElement.query(By.css('input'));
       input.nativeElement.value = 'some query (focus)';
       input.triggerEventHandler('focus', { });
-      expect(host.searchHandler).toHaveBeenCalledWith('some query (focus)');
+      expect(host.focusHandler).toHaveBeenCalledWith('some query (focus)');
     });
   });
 
diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
index 3603ebf56a..6c79f75002 100644
--- a/aio/src/app/search/search-box/search-box.component.ts
+++ b/aio/src/app/search/search-box/search-box.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
 import { LocationService } from 'app/shared/location.service';
 import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/distinctUntilChanged';
 
 /**
@@ -22,7 +21,7 @@ import 'rxjs/add/operator/distinctUntilChanged';
     placeholder="Search"
     (input)="doSearch()"
     (keyup)="doSearch()"
-    (focus)="doSearch()"
+    (focus)="doFocus()"
     (click)="doSearch()">`
 })
 export class SearchBoxComponent implements OnInit {
@@ -30,9 +29,8 @@ export class SearchBoxComponent implements OnInit {
   private searchSubject = new Subject<string>();
 
   @ViewChild('searchBox') searchBox: ElementRef;
-  @Output() onSearch = this.searchSubject
-                           .filter(value => !!(value && value.trim()))
-                           .distinctUntilChanged();
+  @Output() onSearch = this.searchSubject.distinctUntilChanged();
+  @Output() onFocus = new EventEmitter<string>();
 
   constructor(private locationService: LocationService) { }
 
@@ -42,16 +40,23 @@ export class SearchBoxComponent implements OnInit {
   ngOnInit() {
     const query = this.locationService.search()['search'];
     if (query) {
-      this.searchBox.nativeElement.value = query;
+      this.query = query;
       this.doSearch();
     }
   }
 
   doSearch() {
-    this.searchSubject.next(this.searchBox.nativeElement.value);
+    this.searchSubject.next(this.query);
+  }
+
+  doFocus() {
+    this.onFocus.emit(this.query);
   }
 
   focus() {
     this.searchBox.nativeElement.focus();
   }
+
+  private get query() { return this.searchBox.nativeElement.value; }
+  private set query(value: string) { this.searchBox.nativeElement.value = value; }
 }