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

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

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');
+        });
       });
     });
 

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

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
+  @Output() onSearch = this.searchSubject.distinctUntilChanged();
-                           .filter(value => !!(value && value.trim()))
+  @Output() onFocus = new EventEmitter<string>();
-                           .distinctUntilChanged();
 
   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; }
 }