fix(typeahead): properly respect focusFirst option

Closes #876

Closes #1021

src/typeahead/typeahead-window.spec.ts

@@ -82,6 +82,41 @@ describe('ngb-typeahead-window', () => {
       expectResults(fixture.nativeElement, ['+bar', 'baz']);
     });
 
+    it('should wrap active row on prev / next method call for [focusFirst]="false"', () => {
+      const html = `
+           <button (click)="w.next()">+</button>
+           <button (click)="w.prev()">-</button>
+           <ngb-typeahead-window [results]="results" [term]="term" #w="ngbTypeaheadWindow" [focusFirst]="false"></ngb-typeahead-window>`;
+      const fixture = createTestComponent(html);
+      const buttons = fixture.nativeElement.querySelectorAll('button');
+
+      expectResults(fixture.nativeElement, ['bar', 'baz']);
+
+      buttons[0].click();  // next
+      fixture.detectChanges();
+      expectResults(fixture.nativeElement, ['+bar', 'baz']);
+
+      buttons[0].click();  // next
+      fixture.detectChanges();
+      expectResults(fixture.nativeElement, ['bar', '+baz']);
+
+      buttons[0].click();  // next
+      fixture.detectChanges();
+      expectResults(fixture.nativeElement, ['bar', 'baz']);
+
+      buttons[1].click();  // prev
+      fixture.detectChanges();
+      expectResults(fixture.nativeElement, ['bar', '+baz']);
+
+      buttons[1].click();  // prev
+      fixture.detectChanges();
+      expectResults(fixture.nativeElement, ['+bar', 'baz']);
+
+      buttons[1].click();  // prev
+      fixture.detectChanges();
+      expectResults(fixture.nativeElement, ['bar', 'baz']);
+    });
+
     it('should change active row on mouseenter', () => {
       const fixture =
           createTestComponent(`<ngb-typeahead-window [results]="results" [term]="term"></ngb-typeahead-window>`);

src/typeahead/typeahead-window.ts

@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter, TemplateRef} from '@angular/core';
+import {Component, Input, Output, EventEmitter, TemplateRef, OnInit} from '@angular/core';
 
 import {toString} from '../util/util';
 
@@ -35,11 +35,13 @@ export interface ResultTemplateContext {
     </template>
   `
 })
-export class NgbTypeaheadWindow {
+export class NgbTypeaheadWindow implements OnInit {
+  activeIdx = 0;
+
   /**
-   * An index of a match to be selected initially
+   * Flag indicating if the first row should be active initially
    */
-  @Input() activeIdx = 0;
+  @Input() focusFirst = true;
 
   /**
    * Typeahead match results to be displayed
@@ -69,17 +71,27 @@ export class NgbTypeaheadWindow {
 
   getActive() { return this.results[this.activeIdx]; }
 
-  /**
-   * @internal
-   */
   markActive(activeIdx: number) { this.activeIdx = activeIdx; }
 
-  next() { this.activeIdx = (this.activeIdx + 1) % this.results.length; }
+  next() {
+    if (this.activeIdx === this.results.length - 1) {
+      this.activeIdx = this.focusFirst ? (this.activeIdx + 1) % this.results.length : -1;
+    } else {
+      this.activeIdx++;
+    }
+  }
 
-  prev() { this.activeIdx = (this.activeIdx <= 0 ? this.results.length - 1 : this.activeIdx - 1); }
+  prev() {
+    if (this.activeIdx < 0) {
+      this.activeIdx = this.results.length - 1;
+    } else if (this.activeIdx === 0) {
+      this.activeIdx = this.focusFirst ? this.results.length - 1 : -1;
+    } else {
+      this.activeIdx--;
+    }
+  }
 
-  /**
-   * @internal
-   */
   select(item) { this.selectEvent.emit(item); }
+
+  ngOnInit() { this.activeIdx = this.focusFirst ? 0 : -1; }
 }

src/typeahead/typeahead.spec.ts

@@ -329,7 +329,7 @@ describe('ngb-typeahead', () => {
       event = createKeyDownEvent(Key.ArrowDown);
       getDebugInput(fixture.debugElement).triggerEventHandler('keydown', event);
       fixture.detectChanges();
-      expectWindowResults(compiled, ['+one', 'one more']);
+      expectWindowResults(compiled, ['one', 'one more']);
       expect(event.preventDefault).toHaveBeenCalled();
     });
 

src/typeahead/typeahead.ts

@@ -273,7 +273,7 @@ export class NgbTypeahead implements ControlValueAccessor,
         this._closePopup();
       } else {
         this._openPopup();
-        this._windowRef.instance.activeIdx = this.focusFirst ? 0 : -1;
+        this._windowRef.instance.focusFirst = this.focusFirst;
         this._windowRef.instance.results = results;
         this._windowRef.instance.term = this._elementRef.nativeElement.value;
         if (this.resultFormatter) {