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/lib/core/a11y/focus-key-manager.ts

@@ -7,21 +7,33 @@
  */
 
 import {QueryList} from '@angular/core';
+import {INPUT_KEY_RANGE_START, INPUT_KEY_RANGE_END} from '../core';
 import {ListKeyManager, CanDisable} 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 {
   focus(): void;
+  getFocusableLabel?(): string;
 }
 
+/**
+ * Time in ms to wait after the last keypress to focus the active item.
+ */
+export const FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL = 200;
+
 
 export class FocusKeyManager extends ListKeyManager<Focusable> {
+  private _timer: number | null;
+  private _pressedInputKeys: number[] = [];
+  private _hasLabelFn: boolean;
 
   constructor(items: QueryList<Focusable>) {
     super(items);
+    this._hasLabelFn = items && items.first && 'getFocusableLabel' in items.first;
   }
 
   /**
@@ -36,4 +48,52 @@ export class FocusKeyManager extends ListKeyManager<Focusable> {
     }
   }
 
+  /**
+   * Overrides the key event handling from the ListKeyManager, in order
+   * to add the ability to type to focus an item.
+   */
+  onKeydown(event: KeyboardEvent): void {
+    let keyCode = event.keyCode;
+
+    if (this._hasLabelFn && keyCode >= INPUT_KEY_RANGE_START && keyCode <= INPUT_KEY_RANGE_END) {
+      this._debounceInputEvent(keyCode);
+    } else {
+      this._clearTimeout();
+      super.onKeydown(event);
+    }
+  }
+
+  /** Debounces the input key events and focuses the proper item after the last keystroke. */
+  private _debounceInputEvent(keyCode: number): void {
+    this._pressedInputKeys.push(keyCode);
+
+    this._clearTimeout();
+
+    this._timer = setTimeout(() => {
+      if (this._pressedInputKeys.length) {
+        let inputString = String.fromCharCode.apply(String, this._pressedInputKeys);
+        let items = this._items.toArray();
+
+        this._pressedInputKeys.length = 0;
+
+        for (let i = 0; i < items.length; i++) {
+          let item = items[i];
+
+          // Note that fromCharCode returns uppercase letters.
+          if (items[i].getFocusableLabel!().toUpperCase().trim().startsWith(inputString)) {
+            this.setActiveItem(i);
+            break;
+          }
+        }
+      }
+    }, FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL);
+  }
+
+  /** Clears the currently-running timeout. */
+  private _clearTimeout(): void {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 import {QueryList} from '@angular/core';
 import {fakeAsync, tick} from '@angular/core/testing';
-import {FocusKeyManager} from './focus-key-manager';
+import {FocusKeyManager, FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL} from './focus-key-manager';
 import {DOWN_ARROW, UP_ARROW, TAB} from '../keyboard/keycodes';
 import {ListKeyManager} from './list-key-manager';
 import {ActiveDescendantKeyManager} from './activedescendant-key-manager';
@@ -11,6 +11,12 @@ import {first} from '../rxjs/index';
 class FakeFocusable {
   disabled = false;
   focus() {}
+
+  getFocusableLabel() {
+    return this._label;
+  }
+
+  constructor(private _label?: string) { }
 }
 
 class FakeHighlightable {
@@ -25,6 +31,7 @@ class FakeQueryList<T> extends QueryList<T> {
   toArray() {
     return this.items;
   }
+  get first() { return this.items[0]; }
 }
 
 
@@ -389,7 +396,12 @@ describe('Key managers', () => {
     let keyManager: FocusKeyManager;
 
     beforeEach(() => {
-      itemList.items = [new FakeFocusable(), new FakeFocusable(), new FakeFocusable()];
+      itemList.items = [
+        new FakeFocusable('one'),
+        new FakeFocusable('two'),
+        new FakeFocusable('three')
+      ];
+
       keyManager = new FocusKeyManager(itemList);
 
       // first item is already focused
@@ -400,40 +412,81 @@ 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);
+    });
+
+    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(itemList.items[0].focus).not.toHaveBeenCalled();
+
+      tick(FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL);
+
+      expect(itemList.items[0].focus).toHaveBeenCalled();
+    }));
+
+    it('should focus the first item that starts with a letter', fakeAsync(() => {
+      keyManager.onKeydown(createKeyboardEvent('keydown', 84)); // types "t"
+
+      tick(FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL);
+
+      expect(itemList.items[1].focus).toHaveBeenCalled();
+    }));
+
+    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(FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL);
+
+      expect(itemList.items[1].focus).not.toHaveBeenCalled();
+      expect(itemList.items[2].focus).toHaveBeenCalled();
+    }));
+
+    it('should cancel any pending timers if a non-input key is pressed', fakeAsync(() => {
+      keyManager.onKeydown(createKeyboardEvent('keydown', 84)); // types "t"
+      keyManager.onKeydown(createKeyboardEvent('keydown', 72)); // types "h"
+      keyManager.onKeydown(fakeKeyEvents.downArrow);
+
+      tick(FOCUS_KEY_MANAGER_DEBOUNCE_INTERVAL);
+
+      expect(itemList.items[2].focus).not.toHaveBeenCalled();
+      expect(itemList.items[1].focus).toHaveBeenCalled();
+    }));
 
   });
 

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

@@ -29,7 +29,7 @@ export class ListKeyManager<T extends CanDisable> {
   private _tabOut = new Subject<null>();
   private _wrap: boolean = false;
 
-  constructor(private _items: QueryList<T>) { }
+  constructor(protected _items: QueryList<T>) { }
 
   /**
    * Turns on wrapping mode, which ensures that the active item will wrap to

src/lib/core/keyboard/keycodes.ts

@@ -29,3 +29,6 @@ export const TAB = 9;
 export const ESCAPE = 27;
 export const BACKSPACE = 8;
 export const DELETE = 46;
+
+export const INPUT_KEY_RANGE_START = 65;
+export const INPUT_KEY_RANGE_END = 90;

src/lib/core/option/option.ts

@@ -145,6 +145,11 @@ export class MdOption {
     this._active = false;
   }
 
+  /** Fetches the label to be used when determining whether the option should be focused. */
+  getFocusableLabel(): string {
+    return this.viewValue;
+  }
+
   /** Ensures the option is selected when activated from the keyboard. */
   _handleKeydown(event: KeyboardEvent): void {
     if (event.keyCode === ENTER || event.keyCode === SPACE) {