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