fix(cdk/a11y): clean up list key manager on destroy (#25715)

Historically we haven't needed to do any cleanup for the `ListKeyManager`, because it didn't contain any rxjs subscriptions. Over time we've accumulated more functionality which now needs to be cleaned up.

These changes introduce a `destroy` method and calls it in all the relevant places. I also removed any places where we previously had to do manual cleanup.

Fixes #25537.

Author: crisbeto

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

@@ -82,6 +82,11 @@ describe('Key managers', () => {
       spyOn(keyManager, 'setActiveItem').and.callThrough();
     });
 
+    afterEach(() => {
+      keyManager.destroy();
+      keyManager = null!;
+    });
+
     it('should maintain the active item if the amount of items changes', () => {
       expect(keyManager.activeItemIndex).toBe(0);
       expect(keyManager.activeItem!.getLabel()).toBe('one');
@@ -110,6 +115,14 @@ describe('Key managers', () => {
         expect(spy).toHaveBeenCalled();
       });
 
+      it('should complete the tabOut stream on destroy', () => {
+        const spy = jasmine.createSpy('complete spy');
+        keyManager.tabOut.pipe(take(1)).subscribe({complete: spy});
+        keyManager.destroy();
+
+        expect(spy).toHaveBeenCalled();
+      });
+
       it('should emit tabOut when the tab key is pressed with a modifier', () => {
         const spy = jasmine.createSpy('tabOut spy');
         keyManager.tabOut.pipe(take(1)).subscribe(spy);
@@ -122,27 +135,33 @@ describe('Key managers', () => {
 
       it('should emit an event whenever the active item changes', () => {
         const spy = jasmine.createSpy('change spy');
-        const subscription = keyManager.change.subscribe(spy);
+        keyManager.change.subscribe(spy);
 
         keyManager.onKeydown(fakeKeyEvents.downArrow);
         expect(spy).toHaveBeenCalledTimes(1);
 
         keyManager.onKeydown(fakeKeyEvents.upArrow);
         expect(spy).toHaveBeenCalledTimes(2);
-
-        subscription.unsubscribe();
       });
 
       it('should emit if the active item changed, but not the active index', () => {
         const spy = jasmine.createSpy('change spy');
-        const subscription = keyManager.change.subscribe(spy);
+        keyManager.change.subscribe(spy);
 
         keyManager.setActiveItem(0);
         itemList.reset([new FakeFocusable('zero'), ...itemList.toArray()]);
         keyManager.setActiveItem(0);
 
         expect(spy).toHaveBeenCalledTimes(1);
-        subscription.unsubscribe();
+      });
+
+      it('should complete the change stream on destroy', () => {
+        const spy = jasmine.createSpy('change spy');
+
+        keyManager.change.subscribe({complete: spy});
+        keyManager.destroy();
+
+        expect(spy).toHaveBeenCalled();
       });
 
       it('should activate the first item when pressing down on a clean key manager', () => {
@@ -448,7 +467,7 @@ describe('Key managers', () => {
       ) {
         const initialActiveIndex = keyManager.activeItemIndex;
         const spy = jasmine.createSpy('change spy');
-        const subscription = keyManager.change.subscribe(spy);
+        keyManager.change.subscribe(spy);
 
         expect(context.nextKeyEvent.defaultPrevented).toBe(false);
         expect(context.prevKeyEvent.defaultPrevented).toBe(false);
@@ -465,8 +484,6 @@ describe('Key managers', () => {
         expect(context.prevKeyEvent.defaultPrevented).toBe(false);
         expect(keyManager.activeItemIndex).toBe(initialActiveIndex);
         expect(spy).not.toHaveBeenCalled();
-
-        subscription.unsubscribe();
       }
     });
 
@@ -495,16 +512,14 @@ describe('Key managers', () => {
 
       it('should be able to set the active item without emitting an event', () => {
         const spy = jasmine.createSpy('change spy');
-        const subscription = keyManager.change.subscribe(spy);
+        keyManager.change.subscribe(spy);
 
         expect(keyManager.activeItemIndex).toBe(0);
 
         keyManager.updateActiveItem(2);
 
         expect(keyManager.activeItemIndex).toBe(2);
         expect(spy).not.toHaveBeenCalled();
-
-        subscription.unsubscribe();
       });
 
       it('should expose the active item correctly', () => {
@@ -629,14 +644,12 @@ describe('Key managers', () => {
 
       it('should not emit an event if the item did not change', () => {
         const spy = jasmine.createSpy('change spy');
-        const subscription = keyManager.change.subscribe(spy);
+        keyManager.change.subscribe(spy);
 
         keyManager.setActiveItem(2);
         keyManager.setActiveItem(2);
 
         expect(spy).toHaveBeenCalledTimes(1);
-
-        subscription.unsubscribe();
       });
     });
 
@@ -935,6 +948,16 @@ describe('Key managers', () => {
 
         expect(keyManager.isTyping()).toBe(false);
       }));
+
+      it('should reset isTyping if the key manager is destroyed', fakeAsync(() => {
+        expect(keyManager.isTyping()).toBe(false);
+
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o')); // types "o"
+        expect(keyManager.isTyping()).toBe(true);
+
+        keyManager.destroy();
+        expect(keyManager.isTyping()).toBe(false);
+      }));
     });
   });
 
@@ -953,6 +976,11 @@ describe('Key managers', () => {
       spyOn(itemList.toArray()[2], 'focus');
     });
 
+    afterEach(() => {
+      keyManager.destroy();
+      keyManager = null!;
+    });
+
     it('should focus subsequent items when down arrow is pressed', () => {
       keyManager.onKeydown(fakeKeyEvents.downArrow);
 

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

@@ -48,6 +48,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
   private _wrap = false;
   private readonly _letterKeyStream = new Subject<string>();
   private _typeaheadSubscription = Subscription.EMPTY;
+  private _itemChangesSubscription?: Subscription;
   private _vertical = true;
   private _horizontal: 'ltr' | 'rtl' | null;
   private _allowedModifierKeys: ListKeyManagerModifierKey[] = [];
@@ -68,7 +69,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     // not have access to a QueryList of the items they want to manage (e.g. when the
     // items aren't being collected via `ViewChildren` or `ContentChildren`).
     if (_items instanceof QueryList) {
-      _items.changes.subscribe((newItems: QueryList<T>) => {
+      this._itemChangesSubscription = _items.changes.subscribe((newItems: QueryList<T>) => {
         if (this._activeItem) {
           const itemArray = newItems.toArray();
           const newIndex = itemArray.indexOf(this._activeItem);
@@ -392,6 +393,16 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     this._activeItemIndex = index;
   }
 
+  /** Cleans up the key manager. */
+  destroy() {
+    this._typeaheadSubscription.unsubscribe();
+    this._itemChangesSubscription?.unsubscribe();
+    this._letterKeyStream.complete();
+    this.tabOut.complete();
+    this.change.complete();
+    this._pressedLetters = [];
+  }
+
   /**
    * This method sets the active item, given a list of items and the delta between the
    * currently active item and the new active item. It will calculate differently

src/cdk/listbox/listbox.ts

@@ -494,7 +494,7 @@ export class CdkListbox<T = unknown>
   }
 
   ngOnDestroy() {
-    this.listKeyManager.change.complete();
+    this.listKeyManager?.destroy();
     this.destroyed.next();
     this.destroyed.complete();
   }
@@ -869,9 +869,7 @@ export class CdkListbox<T = unknown>
       this.listKeyManager.withHorizontalOrientation(this._dir?.value || 'ltr');
     }
 
-    this.listKeyManager.change
-      .pipe(takeUntil(this.destroyed))
-      .subscribe(() => this._focusActiveOption());
+    this.listKeyManager.change.subscribe(() => this._focusActiveOption());
   }
 
   /** Focus the active option. */

src/cdk/menu/menu-base.ts

@@ -111,6 +111,7 @@ export abstract class CdkMenuBase
   }
 
   ngOnDestroy() {
+    this.keyManager?.destroy();
     this.destroyed.next();
     this.destroyed.complete();
     this.pointerTracker?.destroy();

src/cdk/stepper/stepper.ts

@@ -411,6 +411,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this._keyManager?.destroy();
     this.steps.destroy();
     this._sortedHeaders.destroy();
     this._destroyed.next();

src/material/autocomplete/autocomplete.ts

@@ -249,6 +249,7 @@ export abstract class _MatAutocompleteBase
   }
 
   ngOnDestroy() {
+    this._keyManager?.destroy();
     this._activeOptionChanges.unsubscribe();
   }
 

src/material/chips/chip-set.ts

@@ -147,6 +147,7 @@ export class MatChipSet
   }
 
   ngOnDestroy() {
+    this._keyManager?.destroy();
     this._chipActions.destroy();
     this._destroyed.next();
     this._destroyed.complete();

src/material/expansion/accordion.ts

@@ -104,6 +104,7 @@ export class MatAccordion
 
   override ngOnDestroy() {
     super.ngOnDestroy();
+    this._keyManager?.destroy();
     this._ownHeaders.destroy();
   }
 }

src/material/legacy-chips/chip-list.ts

@@ -411,9 +411,7 @@ export class MatLegacyChipList
         .subscribe(dir => this._keyManager.withHorizontalOrientation(dir));
     }
 
-    this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
-      this._allowFocusEscape();
-    });
+    this._keyManager.tabOut.subscribe(() => this._allowFocusEscape());
 
     // When the list changes, re-subscribe
     this.chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
@@ -459,10 +457,10 @@ export class MatLegacyChipList
   }
 
   ngOnDestroy() {
+    this._keyManager?.destroy();
     this._destroyed.next();
     this._destroyed.complete();
     this.stateChanges.complete();
-
     this._dropSubscriptions();
   }
 

src/material/legacy-list/selection-list.ts

@@ -468,9 +468,7 @@ export class MatLegacySelectionList
     }
 
     // If the user attempts to tab out of the selection list, allow focus to escape.
-    this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
-      this._allowFocusEscape();
-    });
+    this._keyManager.tabOut.subscribe(() => this._allowFocusEscape());
 
     // When the number of options change, update the tabindex of the selection list.
     this.options.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
@@ -522,6 +520,7 @@ export class MatLegacySelectionList
   }
 
   ngOnDestroy() {
+    this._keyManager?.destroy();
     this._focusMonitor.stopMonitoring(this._element);
     this._destroyed.next();
     this._destroyed.complete();