fix(list-key-manager): align matching logic with native listbox

Currently the typeahead option of the `ListKeyManager` looks for matches from start to end which can lead to some weird behavior where the user might be half-way down the list, but be sent up to the first item (e.g. in a list of `b, a, ba` it would always find `b`). These changes align the behavior closer to the native `listbox` by looking for the next match after the active item. If no match is found, the selection wraps around and starts looking from the beginning.

Author: crisbeto

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

@@ -481,6 +481,62 @@ describe('Key managers', () => {
         expect(keyManager.activeItem).toBe(itemList.items[0]);
       }));
 
+      it('should start looking for matches after the active item', fakeAsync(() => {
+        itemList.items = [
+          new FakeFocusable('Bilbo'),
+          new FakeFocusable('Frodo'),
+          new FakeFocusable('Pippin'),
+          new FakeFocusable('Boromir'),
+          new FakeFocusable('Aragorn')
+        ];
+
+        keyManager.setActiveItem(1);
+        keyManager.onKeydown(createKeyboardEvent('keydown', 66, undefined, 'b'));
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[3]);
+      }));
+
+      it('should wrap back around if there were no matches after the active item', fakeAsync(() => {
+        itemList.items = [
+          new FakeFocusable('Bilbo'),
+          new FakeFocusable('Frodo'),
+          new FakeFocusable('Pippin'),
+          new FakeFocusable('Boromir'),
+          new FakeFocusable('Aragorn')
+        ];
+
+        keyManager.setActiveItem(3);
+        keyManager.onKeydown(createKeyboardEvent('keydown', 66, undefined, 'b'));
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[0]);
+      }));
+
+      it('should wrap back around if the last item is active', fakeAsync(() => {
+        keyManager.setActiveItem(2);
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, undefined, 'o'));
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[0]);
+      }));
+
+      it('should be able to select the first item', fakeAsync(() => {
+        keyManager.setActiveItem(-1);
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, undefined, 'o'));
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[0]);
+      }));
+
+      it('should not do anything if there is no match', fakeAsync(() => {
+        keyManager.setActiveItem(1);
+        keyManager.onKeydown(createKeyboardEvent('keydown', 87, undefined, 'w'));
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBe(itemList.items[1]);
+      }));
+
     });
 
   });

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

@@ -71,12 +71,22 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
       .call(filter, () => this._pressedLetters.length > 0)
       .call(map, () => this._pressedLetters.join(''))
       .subscribe(inputString => {
-        const items = this._items.toArray();
-
-        for (let i = 0; i < items.length; i++) {
+        let items = this._items.toArray();
+        let total = items.length;
+        let hasWrapped = false;
+        let startIndex = this._activeItemIndex + 1 >= total ? 0 : this._activeItemIndex + 1;
+
+        // Start looking for the first item that matches the input string
+        // after the active one. If we reach the end before finding a match,
+        // wrap back and look through the items before the active one.
+        for (let i = startIndex; i < total; i++) {
           if (items[i].getLabel!().toUpperCase().trim().indexOf(inputString) === 0) {
             this.setActiveItem(i);
             break;
+          } else if (!hasWrapped && startIndex > 0 && i === total - 1) {
+            i = -1;
+            total = startIndex;
+            hasWrapped = true;
           }
         }