feat(typeahead): show list of options on focuse when minLength=0

fixes #187, fixes #413
valor-software · Apr 21, 2016 · f1c1909 · f1c1909
1 parent 842da61
commit f1c1909
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/components/typeahead/readme.md b/components/typeahead/readme.md
@@ -40,7 +40,7 @@ export class Typeahead implements OnInit {
 
   - `ngModel` (`string`) - binds to string user's input
   - `typeahead` (`any`) - options source, can be Array of strings or objects or function that return Promise for external matching process
-  - `typeaheadMinLength` (`?number=1`) - minimal no of characters that needs to be entered before typeahead kicks-in. Must be greater than or equal to 1.
+  - `typeaheadMinLength` (`?number=1`) - minimal no of characters that needs to be entered before typeahead kicks-in. When set to 0, typeahead shows on focus with full list of options (limited as normal by typeaheadOptionsLimit)
   - `typeaheadWaitMs` (`?number=0`) - minimal wait time after last character typed before typeahead kicks-in
   - `typeaheadOptionsLimit` (`?number=20`) - maximum length of options items list
   - `typeaheadOptionField` (`?string`) - name of field in array of states that contain options as objects, we use array item as option in case of this field is missing

diff --git a/components/typeahead/typeahead.directive.ts b/components/typeahead/typeahead.directive.ts
@@ -21,7 +21,7 @@ export class Typeahead implements OnInit {
   @Output() public typeaheadOnSelect:EventEmitter<{item:any}> = new EventEmitter(false);
 
   @Input() public typeahead:any;
-  @Input() public typeaheadMinLength:number;
+  @Input() public typeaheadMinLength:number = void 0;
   @Input() public typeaheadWaitMs:number;
   @Input() public typeaheadOptionsLimit:number;
   @Input() public typeaheadOptionField:string;
@@ -92,7 +92,7 @@ export class Typeahead implements OnInit {
         this.debouncer();
       }
 
-      if (this.typeaheadAsync === false) {
+      if (!this.typeaheadAsync) {
         this.processMatches();
         this.finalizeAsyncCall();
       }
@@ -102,6 +102,22 @@ export class Typeahead implements OnInit {
     }
   }
 
+  @HostListener('focus', ['$event.target'])
+  protected onFocus():void {
+    if (this.typeaheadMinLength === 0) {
+      this.typeaheadLoading.emit(true);
+
+      if (this.typeaheadAsync === true) {
+        this.debouncer();
+      }
+
+      if (!this.typeaheadAsync) {
+        this.processMatches();
+        this.finalizeAsyncCall();
+      }
+    }
+  }
+
   @HostListener('blur', ['$event.target'])
   protected onBlur():void {
     console.log('blur')
@@ -147,7 +163,7 @@ export class Typeahead implements OnInit {
 
   public ngOnInit():void {
     this.typeaheadOptionsLimit = this.typeaheadOptionsLimit || 20;
-    this.typeaheadMinLength = this.typeaheadMinLength || 1;
+    this.typeaheadMinLength = this.typeaheadMinLength === void 0 ? 1 : this.typeaheadMinLength;
     this.typeaheadWaitMs = this.typeaheadWaitMs || 0;
 
     // async should be false in case of array
@@ -290,6 +306,13 @@ export class Typeahead implements OnInit {
       return;
     }
 
+    if (!this.cd.model) {
+      for (let i = 0; i < Math.min(this.typeaheadOptionsLimit, this.typeahead.length); i++) {
+        this._matches.push(this.typeahead[i]);
+      }
+      return;
+    }
+
     // If singleWords, break model here to not be doing extra work on each
     // iteration
     let normalizedQuery = (this.typeaheadLatinize
@@ -351,7 +374,7 @@ export class Typeahead implements OnInit {
     this.typeaheadNoResults.emit(this.cd.model.toString().length >=
       this.typeaheadMinLength && this.matches.length <= 0);
 
-    if (this.cd.model.toString().length <= 0 || this._matches.length <= 0) {
+    if (this._matches.length <= 0) {
       this.hide();
       return;
     }