diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts index c068dc7ec7..8d7709f9b3 100644 --- a/demo/src/ng-api-doc.ts +++ b/demo/src/ng-api-doc.ts @@ -2095,6 +2095,10 @@ export const ngdoc: any = { { "name": "typeaheadOnSelect", "description": "
fired when option was selected, return object with data of this option
\n" + }, + { + "name": "typeaheadOnBlur", + "description": "fired when blur event occurres. returns the active item
\n" } ], "properties": [ diff --git a/src/spec/typeahead.directive.spec.ts b/src/spec/typeahead.directive.spec.ts index c7c3c24927..67383dabca 100644 --- a/src/spec/typeahead.directive.spec.ts +++ b/src/spec/typeahead.directive.spec.ts @@ -19,7 +19,8 @@ interface State { template: ` + [typeaheadOptionField]="'name'" + (typeaheadOnBlur)="onBlurEvent($event)"> ` }) class TestTypeaheadComponent { @@ -28,6 +29,8 @@ class TestTypeaheadComponent { {id: 1, name: 'Alabama', region: 'South'}, {id: 2, name: 'Alaska', region: 'West'} ]; + + public onBlurEvent (activeItem) { }; } describe('Directive: Typeahead', () => { @@ -166,4 +169,22 @@ describe('Directive: Typeahead', () => { }); }); + describe('onBlur', () => { + beforeEach(fakeAsync(() => { + inputElement.value = 'Alab'; + fireEvent(inputElement, 'keyup'); + + fixture.detectChanges(); + tick(100); + })); + + it('blur event should send the correct active item', () => { + spyOn(fixture.componentInstance, 'onBlurEvent').and.callFake((param) => { + expect(param.item.id).toBe(1); + }); + directive.onBlur(); + fixture.detectChanges(); + }); + }); + }); diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts index df28cc3b9d..3a978ae78c 100644 --- a/src/typeahead/typeahead-container.component.ts +++ b/src/typeahead/typeahead-container.component.ts @@ -79,6 +79,10 @@ export class TypeaheadContainerComponent { this.element = element; } + public get active(): TypeaheadMatch { + return this._active; + } + public get matches(): TypeaheadMatch[] { return this._matches; } diff --git a/src/typeahead/typeahead.directive.ts b/src/typeahead/typeahead.directive.ts index caff95c402..af90dfe397 100644 --- a/src/typeahead/typeahead.directive.ts +++ b/src/typeahead/typeahead.directive.ts @@ -53,6 +53,8 @@ export class TypeaheadDirective implements OnInit, OnDestroy { @Output() public typeaheadNoResults: EventEmitter