fix(menu): scroll active item into view when using arrow keys

Fixes #6

Author: mattlewis92

src/text-input-autocomplete-menu.component.ts

@@ -1,14 +1,15 @@
-import { Component, HostListener } from '@angular/core';
+import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
   template: `
     <ul 
       *ngIf="choices?.length > 0"
+      #dropdownMenu
       class="dropdown-menu"
       [style.top.px]="position?.top"
       [style.left.px]="position?.left">
-      <li 
+      <li
         *ngFor="let choice of choices"
         [class.active]="activeChoice === choice">
         <a
@@ -21,15 +22,16 @@ import { Subject } from 'rxjs';
   `,
   styles: [
     `
-    .dropdown-menu {
-      display: block;
-      max-height: 200px;
-      overflow-y: auto;
-    }
-  `
+      .dropdown-menu {
+        display: block;
+        max-height: 200px;
+        overflow-y: auto;
+      }
+    `
   ]
 })
 export class TextInputAutocompleteMenuComponent {
+  @ViewChild('dropdownMenu') dropdownMenuElement: ElementRef<HTMLUListElement>;
   position: { top: number; left: number };
   selectChoice = new Subject();
   activeChoice: any;
@@ -54,7 +56,7 @@ export class TextInputAutocompleteMenuComponent {
     event.preventDefault();
     const index = this.choices.indexOf(this.activeChoice);
     if (this.choices[index + 1]) {
-      this.activeChoice = this._choices[index + 1];
+      this.scrollToChoice(index + 1);
     }
   }
 
@@ -63,7 +65,7 @@ export class TextInputAutocompleteMenuComponent {
     event.preventDefault();
     const index = this.choices.indexOf(this.activeChoice);
     if (this.choices[index - 1]) {
-      this.activeChoice = this._choices[index - 1];
+      this.scrollToChoice(index - 1);
     }
   }
 
@@ -74,4 +76,18 @@ export class TextInputAutocompleteMenuComponent {
       this.selectChoice.next(this.activeChoice);
     }
   }
+
+  private scrollToChoice(index: number) {
+    this.activeChoice = this._choices[index];
+    if (this.dropdownMenuElement) {
+      const ulPosition = this.dropdownMenuElement.nativeElement.getBoundingClientRect();
+      const li = this.dropdownMenuElement.nativeElement.children[index];
+      const liPosition = li.getBoundingClientRect();
+      if (liPosition.top < ulPosition.top) {
+        li.scrollIntoView();
+      } else if (liPosition.bottom > ulPosition.bottom) {
+        li.scrollIntoView(false);
+      }
+    }
+  }
 }

test/text-input-autocomplete.directive.spec.ts

@@ -109,15 +109,15 @@ describe('text-input-autocomplete directive', () => {
     return fixture.debugElement.query(By.directive(menuComponent));
   }
 
-  function arrowDown() {
-    getMenu().componentInstance.onArrowDown({
+  function arrowDown(menuComponent = TextInputAutocompleteMenuComponent) {
+    getMenu(menuComponent).componentInstance.onArrowDown({
       preventDefault: sinon.spy()
     });
     fixture.detectChanges();
   }
 
-  function arrowUp() {
-    getMenu().componentInstance.onArrowUp({
+  function arrowUp(menuComponent = TextInputAutocompleteMenuComponent) {
+    getMenu(menuComponent).componentInstance.onArrowUp({
       preventDefault: sinon.spy()
     });
     fixture.detectChanges();
@@ -363,4 +363,15 @@ describe('text-input-autocomplete directive', () => {
       expect(getMenu().componentInstance.choiceLoading).to.be.false;
     })
   );
+
+  it(
+    'should not throw when using a custom template and trying to scroll',
+    fakeAsync(() => {
+      component.menuComponent = CustomMenuComponent;
+      fixture.detectChanges();
+      typeInTextarea('text @def');
+      flush();
+      expect(() => arrowDown(CustomMenuComponent)).not.to.throw();
+    })
+  );
 });