fix(select): clicking on the input now causes the item list to appear (…

…#154) * fix(README): Update docs with correct selector ng-select (#148) * fix(select): clicking on the input now causes the item list to appear * fix(select): tslint & merge errors
valor-software · Apr 26, 2016 · c46c0ff · c46c0ff
1 parent 376c4b4
commit c46c0ff
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git a/components/select/off-click.ts b/components/select/off-click.ts
@@ -0,0 +1,23 @@
+import {Directive, HostListener, Input, OnInit, OnDestroy} from 'angular2/core';
+
+@Directive({
+  selector: '[offClick]'
+})
+
+export class OffClickDirective implements OnInit, OnDestroy {
+  /* tslint:disable */
+  @Input('offClick') public offClickHandler: any;
+  /* tslint:enable */
+  @HostListener('click', ['$event']) public onClick($event: MouseEvent): void {
+    $event.stopPropagation();
+  }
+
+  public ngOnInit(): any {
+    setTimeout(() => {document.addEventListener('click', this.offClickHandler);}, 0);
+  }
+
+  public ngOnDestroy(): any {
+    document.removeEventListener('click', this.offClickHandler);
+  }
+
+}
diff --git a/components/select/readme.md b/components/select/readme.md
@@ -7,7 +7,7 @@ import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select';
 ```typescript
 // class Select
 @Component({
-  selector: 'ng2-select',
+  selector: 'ng-select',
   properties: [
     'allowClear',
     'placeholder',

diff --git a/components/select/select.ts b/components/select/select.ts
@@ -1,11 +1,12 @@
-import {Component, Input, Output, EventEmitter, ElementRef, OnInit, OnDestroy} from 'angular2/core';
+import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from 'angular2/core';
 import {SelectItem} from './select-item';
 import {HighlightPipe, stripTags} from './select-pipes';
 import {OptionsBehavior} from './select-interfaces';
 import {escapeRegexp} from './common';
+import {OffClickDirective} from './off-click';
 
 let optionsTemplate = `
-    <ul *ngIf="optionsOpened && options && options.length > 0 && !itemObjects[0].hasChildren()"
+    <ul *ngIf="optionsOpened && options && options.length > 0 && !firstItemHasChildren"
         class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
       <li class="ui-select-choices-group">
         <div *ngFor="#o of options"
@@ -20,7 +21,7 @@ let optionsTemplate = `
       </li>
     </ul>
 
-    <ul *ngIf="optionsOpened && options && options.length > 0 && itemObjects[0].hasChildren()"
+    <ul *ngIf="optionsOpened && options && options.length > 0 && firstItemHasChildren"
         class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
       <li *ngFor="#c of options; #index=index" class="ui-select-choices-group">
         <div class="divider" *ngIf="index > 0"></div>
@@ -41,18 +42,20 @@ let optionsTemplate = `
 `;
 @Component({
   selector: 'ng-select',
+  directives: [OffClickDirective],
   pipes: [HighlightPipe],
   template: `
   <div tabindex="0"
      *ngIf="multiple === false"
      (keyup)="mainClick($event)"
+     [offClick]="clickedOutside"
      class="ui-select-container ui-select-bootstrap dropdown open">
     <div [ngClass]="{'ui-disabled': disabled}"></div>
     <div class="ui-select-match"
          *ngIf="!inputMode">
       <span tabindex="-1"
           class="btn btn-default btn-secondary form-control ui-select-toggle"
-          (^click)="matchClick()"
+          (click)="matchClick($event)"
           style="outline: 0;">
         <span *ngIf="active.length <= 0" class="ui-select-placeholder text-muted">{{placeholder}}</span>
         <span *ngIf="active.length > 0" class="ui-select-match-text pull-left"
@@ -110,7 +113,7 @@ let optionsTemplate = `
   </div>
   `
 })
-export class Select implements OnInit, OnDestroy {
+export class Select implements OnInit {
   @Input() public allowClear:boolean = false;
   @Input() public placeholder:string = '';
   @Input() public initData:Array<any> = [];
@@ -141,7 +144,6 @@ export class Select implements OnInit, OnDestroy {
   public activeOption:SelectItem;
   public element:ElementRef;
 
-  private offSideClickHandler:any;
   private inputMode:boolean = false;
   private optionsOpened:boolean = false;
   private behavior:OptionsBehavior;
@@ -151,6 +153,7 @@ export class Select implements OnInit, OnDestroy {
 
   public constructor(element:ElementRef) {
     this.element = element;
+    this.clickedOutside = this.clickedOutside.bind(this);
   }
 
   public inputEvent(e:any, isUpMode:boolean = false):void {
@@ -229,21 +232,14 @@ export class Select implements OnInit, OnDestroy {
   }
 
   public ngOnInit():any {
-    this.behavior = this.itemObjects[0].hasChildren() ?
+    this.behavior = (this.firstItemHasChildren) ?
       new ChildrenBehavior(this) : new GenericBehavior(this);
-    this.offSideClickHandler = this.getOffSideClickHandler(this);
-    document.addEventListener('click', this.offSideClickHandler);
     if (this.initData) {
       this.active = this.initData.map((data:any) => new SelectItem(data));
       this.data.emit(this.active);
     }
   }
 
-  public ngOnDestroy():any {
-    document.removeEventListener('click', this.offSideClickHandler);
-    this.offSideClickHandler = void 0;
-  }
-
   public remove(item:SelectItem):void {
     if (this._disabled === true) {
       return;
@@ -267,6 +263,15 @@ export class Select implements OnInit, OnDestroy {
     }
   }
 
+  public clickedOutside():void  {
+    this.inputMode = false;
+    this.optionsOpened = false;
+  }
+
+  public get firstItemHasChildren():boolean {
+    return this.itemObjects[0] && this.itemObjects[0].hasChildren();
+  }
+
   protected matchClick(e:any):void {
     if (this._disabled === true) {
       return;
@@ -337,27 +342,6 @@ export class Select implements OnInit, OnDestroy {
     this.optionsOpened = true;
   }
 
-  private getOffSideClickHandler(context:any):Function {
-    return function (e:any):void {
-      if (e.target && e.target.nodeName === 'INPUT'
-        && e.target.className && e.target.className.indexOf('ui-select') >= 0) {
-        return;
-      }
-
-      if (e.srcElement.contains(context.element.nativeElement)
-        && e.srcElement && e.srcElement.className &&
-        e.srcElement.className.indexOf('ui-select') >= 0) {
-        if (e.target.nodeName !== 'INPUT') {
-          context.matchClick(void 0);
-        }
-        return;
-      }
-
-      context.inputMode = false;
-      context.optionsOpened = false;
-    };
-  }
-
   private hideOptions():void {
     this.inputMode = false;
     this.optionsOpened = false;