From 62eb22ab1ef0605c39dc55b29790ed3e507b8a65 Mon Sep 17 00:00:00 2001
From: imribarr-compit <imriba@compit.com>
Date: Tue, 28 Feb 2017 23:15:51 +0200
Subject: [PATCH] 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                        |  4 ++++
 src/spec/typeahead.directive.spec.ts          | 23 ++++++++++++++++++-
 .../typeahead-container.component.ts          |  4 ++++
 src/typeahead/typeahead.directive.ts          | 10 +++-----
 4 files changed, 33 insertions(+), 8 deletions(-)

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": "<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": [
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: `
   <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();
+    });
+  });
+
 });
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<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) {