fix(autocomplete): scroll options below fold into view

Author: kara

src/lib/autocomplete/autocomplete-trigger.ts

@@ -15,6 +15,19 @@ import 'rxjs/add/observable/merge';
 import {Dir} from '../core/rtl/dir';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/add/operator/switchMap';
+import {keyAffectsActiveItem} from '../core/a11y/list-key-manager';
+
+/**
+ * The following style constants are necessary to save here in order
+ * to properly calculate the scrollTop of the panel. Because we are not
+ * actually focusing the active item, scroll must be handled manually.
+ */
+
+/** The height of each autocomplete option. */
+export const AUTOCOMPLETE_OPTION_HEIGHT = 48;
+
+/** The total height of the autocomplete panel. */
+export const MD_AUTOCOMPLETE_PANEL_HEIGHT = 256;
 
 @Directive({
   selector: 'input[mdAutocomplete], input[matAutocomplete]',
@@ -116,9 +129,25 @@ export class MdAutocompleteTrigger implements AfterContentInit, OnDestroy {
     } else {
       this.openPanel();
       this._keyManager.onKeydown(event);
+      if (keyAffectsActiveItem(event)) {
+        this._scrollToOption();
+      }
     }
   }
 
+  /**
+   * Given that we are not actually focusing active options, we must manually adjust scroll
+   * to reveal options below the fold. First, we find the offset of the option from the top
+   * of the panel. The new scrollTop will be that offset - the panel height + the option
+   * height, so the active option will be just visible at the bottom of the panel.
+   */
+  private _scrollToOption(): void {
+    const optionOffset = this._keyManager.activeItemIndex * AUTOCOMPLETE_OPTION_HEIGHT;
+    const newScrollTop =
+        Math.max(0, optionOffset - MD_AUTOCOMPLETE_PANEL_HEIGHT + AUTOCOMPLETE_OPTION_HEIGHT);
+    this.autocomplete._setScrollTop(newScrollTop);
+  }
+
   /**
    * This method listens to a stream of panel closing actions and resets the
    * stream every time the option list changes.

src/lib/autocomplete/autocomplete.html

@@ -1,5 +1,5 @@
 <template>
-  <div class="md-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getPositionClass()">
+  <div class="md-autocomplete-panel" role="listbox" [id]="id" [ngClass]="_getPositionClass()" #panel>
     <ng-content></ng-content>
   </div>
 </template>

src/lib/autocomplete/autocomplete.spec.ts

@@ -451,6 +451,26 @@ describe('MdAutocomplete', () => {
       });
     }));
 
+    it('should scroll to active options below the fold', () => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const scrollContainer = document.querySelector('.cdk-overlay-pane .md-autocomplete-panel');
+
+      fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+      fixture.detectChanges();
+      expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+
+      // These down arrows will set the 6th option active, below the fold.
+      [1,2,3,4, 5].forEach(() => {
+        fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+      });
+      fixture.detectChanges();
+
+      // Expect option bottom minus the panel height (288 - 256 = 32)
+      expect(scrollContainer.scrollTop).toEqual(32, `Expected panel to reveal the sixth option.`);
+    });
+
   });
 
   describe('Fallback positions', () => {

src/lib/autocomplete/autocomplete.ts

@@ -1,6 +1,7 @@
 import {
   Component,
   ContentChildren,
+  ElementRef,
   QueryList,
   TemplateRef,
   ViewChild,
@@ -29,11 +30,20 @@ export class MdAutocomplete {
   positionY: MenuPositionY = 'below';
 
   @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild('panel') panel: ElementRef;
   @ContentChildren(MdOption) options: QueryList<MdOption>;
 
   /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
   id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`;
 
+  /**
+   * Sets the panel scrollTop. This allows us to manually scroll to display
+   * options below the fold, as they are not actually being focused when active.
+   */
+  _setScrollTop(scrollTop: number): void {
+    this.panel.nativeElement.scrollTop = scrollTop;
+  }
+
   /** Sets a class on the panel based on its position (used to set y-offset). */
   _getPositionClass() {
     return {

src/lib/core/a11y/list-key-manager.spec.ts

@@ -1,7 +1,7 @@
 import {QueryList} from '@angular/core';
 import {FocusKeyManager} from './focus-key-manager';
 import {DOWN_ARROW, UP_ARROW, TAB, HOME, END} from '../keyboard/keycodes';
-import {ListKeyManager} from './list-key-manager';
+import {ListKeyManager, keyAffectsActiveItem} from './list-key-manager';
 import {ActiveDescendantKeyManager} from './activedescendant-key-manager';
 
 class FakeFocusable {
@@ -349,6 +349,20 @@ describe('Key managers', () => {
 
     });
 
+    it('should determine if keyAffectsActiveItem()', () => {
+      expect(keyAffectsActiveItem(DOWN_ARROW_EVENT))
+          .toBe(true, 'Expected DOWN key to return true for affecting active item.');
+      expect(keyAffectsActiveItem(UP_ARROW_EVENT))
+          .toBe(true, 'Expected UP key to return true for affecting active item.');
+      expect(keyAffectsActiveItem(HOME_EVENT))
+          .toBe(true, 'Expected HOME key to return true for affecting active item.');
+      expect(keyAffectsActiveItem(END_EVENT))
+          .toBe(true, 'Expected END key to return true for affecting active item.');
+      const A_KEY_EVENT = new FakeEvent(65) as KeyboardEvent;
+      expect(keyAffectsActiveItem(A_KEY_EVENT))
+          .toBe(false, 'Expected A key to return false for affecting active item.');
+    });
+
   });
 
   describe('FocusKeyManager', () => {

src/lib/core/a11y/list-key-manager.ts

@@ -174,3 +174,13 @@ export class ListKeyManager<T extends CanDisable> {
 
 }
 
+/**
+ * Whether the key event is a directional key that will affect the
+ * currently active item.
+ */
+export function keyAffectsActiveItem(event: KeyboardEvent): boolean {
+  return event.keyCode === DOWN_ARROW ||
+      event.keyCode === UP_ARROW ||
+      event.keyCode === HOME ||
+      event.keyCode === END;
+}