fix(typeahead): blur event handler should not prevent item selection

fixes #403, fixes #418, fixes #356

Author: valorkin

components/typeahead/typeahead-container.component.ts

@@ -5,12 +5,12 @@ import {Typeahead} from './typeahead.directive';
 import {TypeaheadOptions} from './typeahead-options.class';
 import {positionService} from '../position';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
-
 const TEMPLATE:any = {
   [Ng2BootstrapTheme.BS4]: `
   <div class="dropdown-menu"
+       style="display: block"
       [ngStyle]="{top: top, left: left, display: display}"
-      style="display: block">
+      (mouseleave)="focusLost()">
       <a href="#"
          *ngFor="#match of matches"
          class="dropdown-item"
@@ -22,8 +22,9 @@ const TEMPLATE:any = {
   `,
   [Ng2BootstrapTheme.BS3]: `
   <ul class="dropdown-menu"
+      style="display: block"
       [ngStyle]="{top: top, left: left, display: display}"
-      style="display: block">
+      (mouseleave)="focusLost()">
     <li *ngFor="#match of matches"
         [class.active]="isActive(match)"
         (mouseenter)="selectActive(match)">
@@ -32,7 +33,6 @@ const TEMPLATE:any = {
   </ul>
   `
 };
-
 @Component({
   selector: 'typeahead-container',
   directives: [CORE_DIRECTIVES],
@@ -43,9 +43,10 @@ export class TypeaheadContainer {
   public parent:Typeahead;
   public query:any;
   public element:ElementRef;
+  public isFocused:boolean = false;
+  private _active:any;
   private _matches:Array<any> = [];
   private _field:string;
-  private _active:any;
   private top:string;
   private left:string;
   private display:string;
@@ -62,7 +63,6 @@ export class TypeaheadContainer {
 
   public set matches(value:Array<string>) {
     this._matches = value;
-
     if (this._matches.length > 0) {
       this._active = this._matches[0];
     }
@@ -103,6 +103,7 @@ export class TypeaheadContainer {
   }
 
   protected selectActive(value:any):void {
+    this.isFocused = true;
     this._active = value;
   }
 
@@ -115,7 +116,6 @@ export class TypeaheadContainer {
       : itemStr).toLowerCase();
     let startIdx:number;
     let tokenLen:number;
-
     // Replaces the capture string with the same string inside of a "strong" tag
     if (typeof query === 'object') {
       let queryLen:number = query.length;
@@ -136,7 +136,6 @@ export class TypeaheadContainer {
         itemStr = itemStr.substring(0, startIdx) + '<strong>' + itemStr.substring(startIdx, startIdx + tokenLen) + '</strong>' + itemStr.substring(startIdx + tokenLen);
       }
     }
-
     return itemStr;
   }
 
@@ -149,11 +148,14 @@ export class TypeaheadContainer {
       e.stopPropagation();
       e.preventDefault();
     }
-
     this.parent.changeModel(value);
     this.parent.typeaheadOnSelect.emit({
       item: value
     });
     return false;
   }
+
+  private focusLost():void {
+    this.isFocused = false;
+  }
 }

components/typeahead/typeahead-options.class.ts

@@ -1,6 +1,9 @@
+import {Typeahead}from './typeahead.directive';
+
 export class TypeaheadOptions {
   public placement:string;
   public animation:boolean;
+  public typeaheadRef:Typeahead;
 
   public constructor(options:TypeaheadOptions) {
     Object.assign(this, options);

components/typeahead/typeahead.directive.ts

@@ -1,6 +1,6 @@
 import {
   Directive, Input, Output, HostListener, EventEmitter, OnInit, ElementRef,
-  Renderer, DynamicComponentLoader, ComponentRef, Provider, Injector
+  Renderer, DynamicComponentLoader, ComponentRef, Injector, provide
 } from 'angular2/core';
 import {NgModel} from 'angular2/common';
 import {TypeaheadUtils} from './typeahead-utils';
@@ -41,12 +41,14 @@ export class Typeahead implements OnInit {
   // @Input() private typeaheadFocusOnSelect:boolean;
 
   public container:TypeaheadContainer;
+  public isTypeaheadOptionsListActive:boolean = false;
 
   private debouncer:Function;
   private _matches:Array<any> = [];
   private placement:string = 'bottom-left';
   private popup:Promise<ComponentRef>;
 
+
   private cd:NgModel;
   private element:ElementRef;
   private renderer:Renderer;
@@ -102,15 +104,36 @@ export class Typeahead implements OnInit {
 
   @HostListener('blur', ['$event.target'])
   protected onBlur():void {
-    // Allow typeahead container click event to be triggered requires a timeout
-    setTimeout(this.hide.bind(this), 10);
+    console.log('blur')
+    if (this.container && !this.container.isFocused) {
+      console.log('blur hide')
+      this.hide();
+    }
   }
 
   @HostListener('keydown', ['$event'])
   protected onKeydown(e:KeyboardEvent):void {
-    // When typeahead container is visible, prevent submitting the form
-    if (this.container && e.keyCode === 13) {
+    // no container - no problems
+    if (!this.container) {
+      return;
+    }
+
+    // if items is visible - prevent form submition
+    if (e.keyCode === 13) {
       e.preventDefault();
+      return;
+    }
+
+    // if shift + tab, close items list
+    if (e.shiftKey && e.keyCode === 9) {
+      this.hide();
+      return;
+    }
+
+    // if tab select current item
+    if (!e.shiftKey && e.keyCode === 9) {
+      this.container.selectActiveMatch();
+      return;
     }
   }
 
@@ -166,12 +189,13 @@ export class Typeahead implements OnInit {
 
   public show(matches:Array<any>):void {
     let options = new TypeaheadOptions({
+      typeaheadRef: this,
       placement: this.placement,
       animation: false
     });
 
     let binding = Injector.resolve([
-      new Provider(TypeaheadOptions, {useValue: options})
+      provide(TypeaheadOptions, {useValue: options})
     ]);
 
     this.popup = this.loader