fix(material/menu): custom origin in focusFirstItem not respected on open (#25812)

A while ago we added an `NgZone.onStable` wrapped around the logic that moves focus in `MatMenu.focusFirstItem` in order to work around an issue with VoiceOver. Since focus is now delayed, calling `focusFirstItem` in quick succession with different origins may not work as expected.

These changes unsubscribe from the previous `onStable` callback if a new one comes in before it has finished.

Fixes #25658.

Author: crisbeto

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

@@ -768,6 +768,32 @@ describe('MatMenu', () => {
     expect(fixture.componentInstance.items.first.focus).toHaveBeenCalledWith('touch');
   }));
 
+  it('should set the proper origin when calling focusFirstItem after the opening sequence has started', () => {
+    let zone: MockNgZone;
+    const fixture = createComponent(
+      SimpleMenu,
+      [
+        {
+          provide: NgZone,
+          useFactory: () => (zone = new MockNgZone()),
+        },
+      ],
+      [FakeIcon],
+    );
+    fixture.detectChanges();
+    spyOn(fixture.componentInstance.items.first, 'focus').and.callThrough();
+
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+
+    dispatchMouseEvent(triggerEl, 'mousedown');
+    triggerEl.click();
+    fixture.detectChanges();
+    fixture.componentInstance.menu.focusFirstItem('touch');
+    zone!.onStable.next();
+
+    expect(fixture.componentInstance.items.first.focus).toHaveBeenCalledOnceWith('touch');
+  });
+
   it('should close the menu when using the CloseScrollStrategy', fakeAsync(() => {
     const scrolledSubject = new Subject();
     const fixture = createComponent(

src/material/menu/menu.spec.ts

@@ -771,6 +771,32 @@ describe('MDC-based MatMenu', () => {
     expect(fixture.componentInstance.items.first.focus).toHaveBeenCalledWith('touch');
   }));
 
+  it('should set the proper origin when calling focusFirstItem after the opening sequence has started', () => {
+    let zone: MockNgZone;
+    const fixture = createComponent(
+      SimpleMenu,
+      [
+        {
+          provide: NgZone,
+          useFactory: () => (zone = new MockNgZone()),
+        },
+      ],
+      [FakeIcon],
+    );
+    fixture.detectChanges();
+    spyOn(fixture.componentInstance.items.first, 'focus').and.callThrough();
+
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+
+    dispatchMouseEvent(triggerEl, 'mousedown');
+    triggerEl.click();
+    fixture.detectChanges();
+    fixture.componentInstance.menu.focusFirstItem('touch');
+    zone!.onStable.next();
+
+    expect(fixture.componentInstance.items.first.focus).toHaveBeenCalledOnceWith('touch');
+  });
+
   it('should close the menu when using the CloseScrollStrategy', fakeAsync(() => {
     const scrolledSubject = new Subject();
     const fixture = createComponent(

src/material/menu/menu.ts

@@ -40,7 +40,7 @@ import {
   UP_ARROW,
   hasModifierKey,
 } from '@angular/cdk/keycodes';
-import {merge, Observable, Subject} from 'rxjs';
+import {merge, Observable, Subject, Subscription} from 'rxjs';
 import {startWith, switchMap, take} from 'rxjs/operators';
 import {MatMenuItem} from './menu-item';
 import {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';
@@ -102,6 +102,7 @@ export class _MatMenuBase
   private _keyManager: FocusKeyManager<MatMenuItem>;
   private _xPosition: MenuPositionX = this._defaultOptions.xPosition;
   private _yPosition: MenuPositionY = this._defaultOptions.yPosition;
+  private _firstItemFocusSubscription?: Subscription;
   private _previousElevation: string;
   protected _elevationPrefix: string;
   protected _baseElevation: number;
@@ -337,6 +338,7 @@ export class _MatMenuBase
     this._keyManager?.destroy();
     this._directDescendantItems.destroy();
     this.closed.complete();
+    this._firstItemFocusSubscription?.unsubscribe();
   }
 
   /** Stream that emits whenever the hovered menu item changes. */
@@ -407,7 +409,8 @@ export class _MatMenuBase
    */
   focusFirstItem(origin: FocusOrigin = 'program'): void {
     // Wait for `onStable` to ensure iOS VoiceOver screen reader focuses the first item (#24735).
-    this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+    this._firstItemFocusSubscription?.unsubscribe();
+    this._firstItemFocusSubscription = this._ngZone.onStable.pipe(take(1)).subscribe(() => {
       let menuPanel: HTMLElement | null = null;
 
       if (this._directDescendantItems.length) {