fix(material/select): don't assign typeahead value after blur (#25811)

Fixes that the select would assign the value triggered by the typeahead even if the select doesn't have focus anymore.

Fixes #25452.

Author: crisbeto

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

@@ -958,6 +958,17 @@ describe('Key managers', () => {
         keyManager.destroy();
         expect(keyManager.isTyping()).toBe(false);
       }));
+
+      it('should be able to cancel the typeahead sequence', fakeAsync(() => {
+        expect(keyManager.activeItem).toBeFalsy();
+
+        keyManager.onKeydown(createKeyboardEvent('keydown', 79, 'o')); // types "o"
+        expect(keyManager.activeItem).toBeFalsy();
+        keyManager.cancelTypeahead();
+        tick(debounceInterval);
+
+        expect(keyManager.activeItem).toBeFalsy();
+      }));
     });
   });
 

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

@@ -188,6 +188,12 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     return this;
   }
 
+  /** Cancels the current typeahead sequence. */
+  cancelTypeahead(): this {
+    this._pressedLetters = [];
+    return this;
+  }
+
   /**
    * Configures the key manager to activate the first and last items
    * respectively when the Home or End key is pressed.

src/material/legacy-select/select.spec.ts

@@ -655,6 +655,22 @@ describe('MatSelect', () => {
             .toBe(options[1].value);
         }));
 
+        it('should cancel the typeahead selection on blur', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+          const options = fixture.componentInstance.options.toArray();
+
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
+
+          dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
+          dispatchFakeEvent(select, 'blur');
+          tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
+
+          expect(options.some(o => o.selected))
+            .withContext('Expected no options to be selected.')
+            .toBe(false);
+          expect(formControl.value).withContext('Expected no value to be assigned.').toBeFalsy();
+        }));
+
         it('should open the panel when pressing a vertical arrow key on a closed multiple select', fakeAsync(() => {
           fixture.destroy();
 

src/material/select/select.spec.ts

@@ -689,6 +689,22 @@ describe('MDC-based MatSelect', () => {
             .toBe(options[1].value);
         }));
 
+        it('should cancel the typeahead selection on blur', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+          const options = fixture.componentInstance.options.toArray();
+
+          expect(formControl.value).withContext('Expected no initial value.').toBeFalsy();
+
+          dispatchEvent(select, createKeyboardEvent('keydown', 80, 'p'));
+          dispatchFakeEvent(select, 'blur');
+          tick(DEFAULT_TYPEAHEAD_DEBOUNCE_INTERVAL);
+
+          expect(options.some(o => o.selected))
+            .withContext('Expected no options to be selected.')
+            .toBe(false);
+          expect(formControl.value).withContext('Expected no value to be assigned.').toBeFalsy();
+        }));
+
         it('should open the panel when pressing a vertical arrow key on a closed multiple select', fakeAsync(() => {
           fixture.destroy();
 

src/material/select/select.ts

@@ -790,6 +790,7 @@ export abstract class _MatSelectBase<C>
    */
   _onBlur() {
     this._focused = false;
+    this._keyManager?.cancelTypeahead();
 
     if (!this.disabled && !this.panelOpen) {
       this._onTouched();

tools/public_api_guard/cdk/a11y.md

@@ -342,6 +342,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     constructor(_items: QueryList<T> | T[]);
     get activeItem(): T | null;
     get activeItemIndex(): number | null;
+    cancelTypeahead(): this;
     readonly change: Subject<number>;
     destroy(): void;
     isTyping(): boolean;