feat(typeahead): - added typeaheadOnBlur event (#1639)

* - added typeaheadOnBlur event
- added documentation for typeaheadOnBlur
- removed tab event key since blur event handles it
- added getter to _active item

* - fixed syntax error

* - maybe dependency problem?

* - added unit tests

* trying to build again

demo/src/ng-api-doc.ts

@@ -2095,6 +2095,10 @@ export const ngdoc: any = {
       {
         "name": "typeaheadOnSelect",
         "description": "<p>fired when option was selected, return object with data of this option </p>\n"
+      },
+      {
+        "name": "typeaheadOnBlur",
+        "description": "<p>fired when blur event occurres. returns the active item </p>\n"
       }
     ],
     "properties": [

src/spec/typeahead.directive.spec.ts

@@ -19,7 +19,8 @@ interface State {
   template: `
   <input [(ngModel)]="selectedState" 
          [typeahead]="states" 
-         [typeaheadOptionField]="'name'">
+         [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();
+    });
+  });
+
 });

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

src/typeahead/typeahead.directive.ts

@@ -53,6 +53,8 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   @Output() public typeaheadNoResults: EventEmitter<boolean> = new EventEmitter();
   /** fired when option was selected, return object with data of this option */
   @Output() public typeaheadOnSelect: EventEmitter<TypeaheadMatch> = new EventEmitter();
+  /** fired when blur event occurres. returns the active item */
+  @Output() public typeaheadOnBlur: EventEmitter<any> = new EventEmitter();
 
   /**
    * A selector specifying the element the typeahead should be appended to.
@@ -143,6 +145,7 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
   @HostListener('blur')
   public onBlur(): void {
     if (this._container && !this._container.isFocused) {
+      this.typeaheadOnBlur.emit(this._container.active);
       this.hide();
     }
   }
@@ -159,13 +162,6 @@ export class TypeaheadDirective implements OnInit, OnDestroy {
       e.preventDefault();
       return;
     }
-
-    // if tab default browser behavior will select next input field, and
-    // therefore we should close the items list
-    if (e.keyCode === 9) {
-      this.hide();
-      return;
-    }
   }
 
   public constructor(control: NgControl, viewContainerRef: ViewContainerRef, element: ElementRef, renderer: Renderer, cis: ComponentLoaderFactory) {