feat(select): allow focusing items by typing

Allows for users to skip to a select item by typing, similar to the native select.

Fixes #2668.

Author: crisbeto

src/cdk/a11y/activedescendant-key-manager.ts

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ListKeyManager, CanDisable} from './list-key-manager';
+import {ListKeyManager, ListKeyManagerItem} from './list-key-manager';
 
 /**
  * This is the interface for highlightable items (used by the ActiveDescendantKeyManager).
  * Each item must know how to style itself as active or inactive and whether or not it is
  * currently disabled.
  */
-export interface Highlightable extends CanDisable {
+export interface Highlightable extends ListKeyManagerItem {
   setActiveStyles(): void;
   setInactiveStyles(): void;
 }

src/cdk/a11y/focus-key-manager.ts

@@ -7,13 +7,13 @@
  */
 
 import {QueryList} from '@angular/core';
-import {ListKeyManager, CanDisable} from './list-key-manager';
+import {ListKeyManager, ListKeyManagerItem} from './list-key-manager';
 
 /**
  * This is the interface for focusable items (used by the FocusKeyManager).
  * Each item must know how to focus itself and whether or not it is currently disabled.
  */
-export interface Focusable extends CanDisable {
+export interface Focusable extends ListKeyManagerItem {
   focus(): void;
 }
 

src/cdk/a11y/list-key-manager.spec.ts

@@ -9,8 +9,10 @@ import {first} from '../rxjs/index';
 
 
 class FakeFocusable {
+  constructor(private _label = '') { }
   disabled = false;
   focus() {}
+  getLabel() { return this._label; }
 }
 
 class FakeHighlightable {
@@ -25,6 +27,7 @@ class FakeQueryList<T> extends QueryList<T> {
   toArray() {
     return this.items;
   }
+  get first() { return this.items[0]; }
 }
 
 
@@ -43,7 +46,7 @@ describe('Key managers', () => {
       downArrow: createKeyboardEvent('keydown', DOWN_ARROW),
       upArrow: createKeyboardEvent('keydown', UP_ARROW),
       tab: createKeyboardEvent('keydown', TAB),
-      unsupported: createKeyboardEvent('keydown', 65) // corresponds to the letter "a"
+      unsupported: createKeyboardEvent('keydown', 192) // corresponds to the tilde character (~)
     };
   });
 
@@ -52,7 +55,11 @@ describe('Key managers', () => {
     let keyManager: ListKeyManager<FakeFocusable>;
 
     beforeEach(() => {
-      itemList.items = [new FakeFocusable(), new FakeFocusable(), new FakeFocusable()];
+      itemList.items = [
+        new FakeFocusable('one'),
+        new FakeFocusable('two'),
+        new FakeFocusable('three')
+      ];
       keyManager = new ListKeyManager<FakeFocusable>(itemList);
 
       // first item is already focused
@@ -383,6 +390,55 @@ describe('Key managers', () => {
 
     });
 
+    describe('typeahead mode', () => {
+      const debounceInterval = 300;
+
+      beforeEach(() => {
+        keyManager.withTypeAhead(debounceInterval);
+        keyManager.setActiveItem(-1);
+      });
+
+      it('should debounce the input key presses', fakeAsync(() => {
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79)); // types "o"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 78)); // types "n"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 69)); // types "e"
+
+        expect(keyManager.activeItem).not.toBe(itemList.items[0]);
+
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[0]);
+      }));
+
+      it('should focus the first item that starts with a letter', fakeAsync(() => {
+        keyManager.onKeydown(createKeyboardEvent('keydown', 84)); // types "t"
+
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[1]);
+      }));
+
+      it('should focus the first item that starts with sequence of letters', fakeAsync(() => {
+        keyManager.onKeydown(createKeyboardEvent('keydown', 84)); // types "t"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 72)); // types "h"
+
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[2]);
+      }));
+
+      it('should cancel any pending timers if a navigation key is pressed', fakeAsync(() => {
+        keyManager.onKeydown(createKeyboardEvent('keydown', 84)); // types "t"
+        keyManager.onKeydown(createKeyboardEvent('keydown', 72)); // types "h"
+        keyManager.onKeydown(fakeKeyEvents.downArrow);
+
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[0]);
+      }));
+
+    });
+
   });
 
   describe('FocusKeyManager', () => {
@@ -400,40 +456,40 @@ describe('Key managers', () => {
       spyOn(itemList.items[2], 'focus');
     });
 
-      it('should focus subsequent items when down arrow is pressed', () => {
-        keyManager.onKeydown(fakeKeyEvents.downArrow);
+    it('should focus subsequent items when down arrow is pressed', () => {
+      keyManager.onKeydown(fakeKeyEvents.downArrow);
 
-        expect(itemList.items[0].focus).not.toHaveBeenCalled();
-        expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
-        expect(itemList.items[2].focus).not.toHaveBeenCalled();
+      expect(itemList.items[0].focus).not.toHaveBeenCalled();
+      expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
+      expect(itemList.items[2].focus).not.toHaveBeenCalled();
 
-        keyManager.onKeydown(fakeKeyEvents.downArrow);
-        expect(itemList.items[0].focus).not.toHaveBeenCalled();
-        expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
-        expect(itemList.items[2].focus).toHaveBeenCalledTimes(1);
-      });
+      keyManager.onKeydown(fakeKeyEvents.downArrow);
+      expect(itemList.items[0].focus).not.toHaveBeenCalled();
+      expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
+      expect(itemList.items[2].focus).toHaveBeenCalledTimes(1);
+    });
 
-      it('should focus previous items when up arrow is pressed', () => {
-        keyManager.onKeydown(fakeKeyEvents.downArrow);
+    it('should focus previous items when up arrow is pressed', () => {
+      keyManager.onKeydown(fakeKeyEvents.downArrow);
 
-        expect(itemList.items[0].focus).not.toHaveBeenCalled();
-        expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
+      expect(itemList.items[0].focus).not.toHaveBeenCalled();
+      expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
 
-        keyManager.onKeydown(fakeKeyEvents.upArrow);
+      keyManager.onKeydown(fakeKeyEvents.upArrow);
 
-        expect(itemList.items[0].focus).toHaveBeenCalledTimes(1);
-        expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
-      });
+      expect(itemList.items[0].focus).toHaveBeenCalledTimes(1);
+      expect(itemList.items[1].focus).toHaveBeenCalledTimes(1);
+    });
 
-      it('should allow setting the focused item without calling focus', () => {
-        expect(keyManager.activeItemIndex)
-            .toBe(0, `Expected first item of the list to be active.`);
+    it('should allow setting the focused item without calling focus', () => {
+      expect(keyManager.activeItemIndex)
+          .toBe(0, `Expected first item of the list to be active.`);
 
-        keyManager.updateActiveItemIndex(1);
-        expect(keyManager.activeItemIndex)
-            .toBe(1, `Expected activeItemIndex to update after calling updateActiveItemIndex().`);
-        expect(itemList.items[1].focus).not.toHaveBeenCalledTimes(1);
-      });
+      keyManager.updateActiveItemIndex(1);
+      expect(keyManager.activeItemIndex)
+          .toBe(1, `Expected activeItemIndex to update after calling updateActiveItemIndex().`);
+      expect(itemList.items[1].focus).not.toHaveBeenCalledTimes(1);
+    });
 
   });
 

src/cdk/a11y/list-key-manager.ts

@@ -9,42 +9,77 @@
 import {QueryList} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import {UP_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/keyboard';
+import {Subscription} from 'rxjs/Subscription';
+import {UP_ARROW, DOWN_ARROW, TAB, A, Z} from '@angular/cdk/keyboard';
+import {RxChain, debounceTime, filter, map, doOperator} from '@angular/cdk/rxjs';
 
 /**
- * This interface is for items that can be disabled. The type passed into
- * ListKeyManager must extend this interface.
+ * This interface is for items that can be passed to a ListKeyManager.
  */
-export interface CanDisable {
+export interface ListKeyManagerItem {
   disabled?: boolean;
+  getLabel?(): string;
 }
 
 /**
  * This class manages keyboard events for selectable lists. If you pass it a query list
  * of items, it will set the active item correctly when arrow events occur.
  */
-export class ListKeyManager<T extends CanDisable> {
-  private _activeItemIndex: number = -1;
+export class ListKeyManager<T extends ListKeyManagerItem> {
+  private _activeItemIndex = -1;
   private _activeItem: T;
-  private _tabOut = new Subject<void>();
-  private _wrap: boolean = false;
+  private _wrap = false;
+  private _pressedInputKeys: number[] = [];
+  private _nonNavigationKeyStream = new Subject<number>();
+  private _typeaheadSubscription: Subscription;
 
   constructor(private _items: QueryList<T>) { }
 
   /**
    * Turns on wrapping mode, which ensures that the active item will wrap to
    * the other end of list when there are no more items in the given direction.
-   *
-   * @returns The ListKeyManager that the method was called on.
    */
   withWrap(): this {
     this._wrap = true;
     return this;
   }
 
+  /**
+   * Turns on typeahead mode which allows users to set the active item by typing.
+   * @param debounceInterval Time to wait after the last keystroke before setting the active item.
+   */
+  withTypeAhead(debounceInterval = 200): this {
+    if (this._items.length && this._items.some(item => typeof item.getLabel !== 'function')) {
+      throw Error('ListKeyManager items in typeahead mode must implement the `getLabel` method.');
+    }
+
+    if (this._typeaheadSubscription) {
+      this._typeaheadSubscription.unsubscribe();
+    }
+
+    this._typeaheadSubscription = RxChain.from(this._nonNavigationKeyStream)
+      .call(filter, keyCode => keyCode >= A && keyCode <= Z)
+      .call(doOperator, keyCode => this._pressedInputKeys.push(keyCode))
+      .call(debounceTime, debounceInterval)
+      .call(filter, () => this._pressedInputKeys.length > 0)
+      .call(map, () => String.fromCharCode(...this._pressedInputKeys))
+      .subscribe(inputString => {
+        const activeItemIndex = this._items.toArray().findIndex(item => {
+          return item.getLabel!().toUpperCase().trim().startsWith(inputString);
+        });
+
+        if (activeItemIndex > -1) {
+          this.setActiveItem(activeItemIndex);
+        }
+
+        this._pressedInputKeys = [];
+      });
+
+    return this;
+  }
+
   /**
    * Sets the active item to the item at the index specified.
-   *
    * @param index The index of the item to be set as active.
    */
   setActiveItem(index: number): void {
@@ -58,20 +93,12 @@ export class ListKeyManager<T extends CanDisable> {
    */
   onKeydown(event: KeyboardEvent): void {
     switch (event.keyCode) {
-      case DOWN_ARROW:
-        this.setNextItemActive();
-        break;
-      case UP_ARROW:
-        this.setPreviousItemActive();
-        break;
-      case TAB:
-        // Note that we shouldn't prevent the default action on tab.
-        this._tabOut.next();
-        return;
-      default:
-        return;
+      case DOWN_ARROW: this.setNextItemActive(); break;
+      case UP_ARROW: this.setPreviousItemActive(); break;
+      default: this._nonNavigationKeyStream.next(event.keyCode); return;
     }
 
+    this._pressedInputKeys = [];
     event.preventDefault();
   }
 
@@ -119,7 +146,7 @@ export class ListKeyManager<T extends CanDisable> {
    * when focus is shifted off of the list.
    */
   get tabOut(): Observable<void> {
-    return this._tabOut.asObservable();
+    return filter.call(this._nonNavigationKeyStream, keyCode => keyCode === TAB);
   }
 
   /**
@@ -173,5 +200,4 @@ export class ListKeyManager<T extends CanDisable> {
     }
     this.setActiveItem(index);
   }
-
 }

src/cdk/keyboard/keycodes.ts

@@ -20,3 +20,5 @@ export const TAB = 9;
 export const ESCAPE = 27;
 export const BACKSPACE = 8;
 export const DELETE = 46;
+export const A = 65;
+export const Z = 90;

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

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ListKeyManager, CanDisable} from './list-key-manager';
+import {ListKeyManager, ListKeyManagerItem} from './list-key-manager';
 
 /**
  * This is the interface for highlightable items (used by the ActiveDescendantKeyManager).
  * Each item must know how to style itself as active or inactive and whether or not it is
  * currently disabled.
  */
-export interface Highlightable extends CanDisable {
+export interface Highlightable extends ListKeyManagerItem {
   setActiveStyles(): void;
   setInactiveStyles(): void;
 }

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

@@ -6,24 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {QueryList} from '@angular/core';
-import {ListKeyManager, CanDisable} from './list-key-manager';
+import {ListKeyManager, ListKeyManagerItem} from './list-key-manager';
 
 /**
  * This is the interface for focusable items (used by the FocusKeyManager).
- * Each item must know how to focus itself and whether or not it is currently disabled.
+ * Each item must know how to focus itself, whether or not it is currently disabled
+ * and be able to supply it's label.
  */
-export interface Focusable extends CanDisable {
+export interface Focusable extends ListKeyManagerItem {
   focus(): void;
 }
 
-
 export class FocusKeyManager extends ListKeyManager<Focusable> {
-
-  constructor(items: QueryList<Focusable>) {
-    super(items);
-  }
-
   /**
    * This method sets the active item to the item at the specified index.
    * It also adds focuses the newly active item.
@@ -35,5 +29,4 @@ export class FocusKeyManager extends ListKeyManager<Focusable> {
       this.activeItem.focus();
     }
   }
-
 }

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

@@ -6,6 +6,4 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {CanDisable, ListKeyManager} from '@angular/cdk/a11y';
-
-
+export {ListKeyManagerItem, ListKeyManager} from '@angular/cdk/a11y';