diff --git a/src/cdk/a11y/key-manager/list-key-manager.spec.ts b/src/cdk/a11y/key-manager/list-key-manager.spec.ts index fdbcd65d4dec..439344abe4b4 100644 --- a/src/cdk/a11y/key-manager/list-key-manager.spec.ts +++ b/src/cdk/a11y/key-manager/list-key-manager.spec.ts @@ -93,6 +93,42 @@ describe('Key managers', () => { expect(keyManager.activeItem!.getLabel()).toBe('one'); }); + it('should update the active item if the current one is removed and there is ' + + 'a new one at the same index', () => { + expect(keyManager.activeItemIndex).toBe(0); + expect(keyManager.activeItem!.getLabel()).toBe('one'); + + itemList.reset([new FakeFocusable('new-0'), new FakeFocusable('new-1')]); + itemList.notifyOnChanges(); + + expect(keyManager.activeItemIndex).toBe(0); + expect(keyManager.activeItem!.getLabel()).toBe('new-0'); + }); + + it('should clear the active item if nothing exists at the new index', () => { + keyManager.setActiveItem(2); + + expect(keyManager.activeItemIndex).toBe(2); + expect(keyManager.activeItem!.getLabel()).toBe('three'); + + itemList.reset(itemList.toArray().slice(0, 1)); + itemList.notifyOnChanges(); + + expect(keyManager.activeItemIndex).toBe(-1); + expect(keyManager.activeItem).toBe(null); + }); + + it('should clear the active item if the list is cleared', () => { + expect(keyManager.activeItemIndex).toBe(0); + expect(keyManager.activeItem!.getLabel()).toBe('one'); + + itemList.reset([]); + itemList.notifyOnChanges(); + + expect(keyManager.activeItemIndex).toBe(-1); + expect(keyManager.activeItem).toBe(null); + }); + it('should start off the activeItem as null', () => { expect(new ListKeyManager([]).activeItem).toBeNull(); }); diff --git a/src/cdk/a11y/key-manager/list-key-manager.ts b/src/cdk/a11y/key-manager/list-key-manager.ts index fcd27e27c7e0..afeaa42e8825 100644 --- a/src/cdk/a11y/key-manager/list-key-manager.ts +++ b/src/cdk/a11y/key-manager/list-key-manager.ts @@ -70,7 +70,9 @@ export class ListKeyManager { const itemArray = newItems.toArray(); const newIndex = itemArray.indexOf(this._activeItem); - if (newIndex > -1 && newIndex !== this._activeItemIndex) { + if (newIndex === -1) { + this.updateActiveItem(this._activeItemIndex); + } else if (newIndex !== this._activeItemIndex) { this._activeItemIndex = newIndex; } } @@ -349,7 +351,7 @@ export class ListKeyManager { // Explicitly check for `null` and `undefined` because other falsy values are valid. this._activeItem = activeItem == null ? null : activeItem; - this._activeItemIndex = index; + this._activeItemIndex = activeItem == null ? -1 : index; } /**