fix(cdk/a11y): activeItem out of date if active index is removed from ListKeyManager

Fixes the `activeItem` on the `ListKeyManager` not matching the item at the `activeItemIndex`, if the `activeItem` is removed from the list.

Fixes #14345.

Author: crisbeto

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

@@ -82,15 +82,28 @@ describe('Key managers', () => {
       spyOn(keyManager, 'setActiveItem').and.callThrough();
     });
 
-    it('should maintain the active item if the amount of items changes', () => {
+    it('should maintain the active item if the amount of items changes', fakeAsync(() => {
       expect(keyManager.activeItemIndex).toBe(0);
       expect(keyManager.activeItem!.getLabel()).toBe('one');
       itemList.reset([new FakeFocusable('zero'), ...itemList.toArray()]);
       itemList.notifyOnChanges();
+      tick();
 
       expect(keyManager.activeItemIndex).toBe(1);
       expect(keyManager.activeItem!.getLabel()).toBe('one');
-    });
+    }));
+
+    it('should keep the active item in sync if the active item is removed', fakeAsync(() => {
+      expect(keyManager.activeItemIndex).toBe(0);
+      expect(keyManager.activeItem!.getLabel()).toBe('one');
+
+      itemList.reset(itemList.toArray().slice(1));
+      itemList.notifyOnChanges();
+      tick();
+
+      expect(keyManager.activeItemIndex).toBe(0);
+      expect(keyManager.activeItem!.getLabel()).toBe('two');
+    }));
 
     it('should start off the activeItem as null', () => {
       expect(new ListKeyManager([]).activeItem).toBeNull();

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

@@ -70,8 +70,11 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
           const itemArray = newItems.toArray();
           const newIndex = itemArray.indexOf(this._activeItem);
 
-          if (newIndex > -1 && newIndex !== this._activeItemIndex) {
-            this._activeItemIndex = newIndex;
+          if (newIndex !== this._activeItemIndex) {
+            // Timeout is required to avoid "changed after checked" errors.
+            setTimeout(() => {
+              this.updateActiveItem(newIndex > -1 ? newIndex : this._activeItemIndex);
+            }, 0);
           }
         }
       });