fix(menu): keyboard controls not working if all items are disabled inside lazy content (#17407)

Fixes the menu's keyboard controls not working if it uses lazy content and all of the items are disabled. We did a similar fix in #16572, but I hadn't accounted for the fact that the items come in asynchronously when lazy content is used.

Fixes #17400.

Author: crisbeto

src/material-experimental/mdc-menu/menu.spec.ts

@@ -828,6 +828,17 @@ describe('MDC-based MatMenu', () => {
         .toBe(overlayContainerElement.querySelector('.mat-mdc-menu-panel'));
   }));
 
+  it('should focus the menu panel if all items are disabled inside lazy content', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenuWithRepeaterInLazyContent, [], [FakeIcon]);
+    fixture.componentInstance.items.forEach(item => item.disabled = true);
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+
+    expect(document.activeElement)
+        .toBe(overlayContainerElement.querySelector('.mat-mdc-menu-panel'));
+  }));
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);
@@ -2445,3 +2456,23 @@ class SimpleMenuWithRepeater {
   @ViewChild(MatMenu) menu: MatMenu;
   items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
 }
+
+
+@Component({
+  template: `
+    <button [matMenuTriggerFor]="menu">Toggle menu</button>
+    <mat-menu #menu="matMenu">
+      <ng-template matMenuContent>
+        <button
+          *ngFor="let item of items"
+          [disabled]="item.disabled"
+          mat-menu-item>{{item.label}}</button>
+      </ng-template>
+    </mat-menu>
+  `
+})
+class SimpleMenuWithRepeaterInLazyContent {
+  @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
+  @ViewChild(MatMenu, {static: false}) menu: MatMenu;
+  items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
+}

src/material/menu/menu.spec.ts

@@ -801,6 +801,16 @@ describe('MatMenu', () => {
     expect(document.activeElement).toBe(overlayContainerElement.querySelector('.mat-menu-panel'));
   }));
 
+  it('should focus the menu panel if all items are disabled inside lazy content', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenuWithRepeaterInLazyContent, [], [FakeIcon]);
+    fixture.componentInstance.items.forEach(item => item.disabled = true);
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(overlayContainerElement.querySelector('.mat-menu-panel'));
+  }));
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);
@@ -2435,6 +2445,25 @@ class SimpleMenuWithRepeater {
   items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
 }
 
+@Component({
+  template: `
+    <button [matMenuTriggerFor]="menu">Toggle menu</button>
+    <mat-menu #menu="matMenu">
+      <ng-template matMenuContent>
+        <button
+          *ngFor="let item of items"
+          [disabled]="item.disabled"
+          mat-menu-item>{{item.label}}</button>
+      </ng-template>
+    </mat-menu>
+  `
+})
+class SimpleMenuWithRepeaterInLazyContent {
+  @ViewChild(MatMenuTrigger, {static: false}) trigger: MatMenuTrigger;
+  @ViewChild(MatMenu, {static: false}) menu: MatMenu;
+  items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
+}
+
 @Component({
   template: `
     <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>

src/material/menu/menu.ts

@@ -328,16 +328,24 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
    * @param origin Action from which the focus originated. Used to set the correct styling.
    */
   focusFirstItem(origin: FocusOrigin = 'program'): void {
-    const manager = this._keyManager;
-
     // When the content is rendered lazily, it takes a bit before the items are inside the DOM.
     if (this.lazyContent) {
       this._ngZone.onStable.asObservable()
         .pipe(take(1))
-        .subscribe(() => manager.setFocusOrigin(origin).setFirstItemActive());
+        .subscribe(() => this._focusFirstItem(origin));
     } else {
-      manager.setFocusOrigin(origin).setFirstItemActive();
+      this._focusFirstItem(origin);
     }
+  }
+
+  /**
+   * Actual implementation that focuses the first item. Needs to be separated
+   * out so we don't repeat the same logic in the public `focusFirstItem` method.
+   */
+  private _focusFirstItem(origin: FocusOrigin) {
+    const manager = this._keyManager;
+
+    manager.setFocusOrigin(origin).setFirstItemActive();
 
     // If there's no active item at this point, it means that all the items are disabled.
     // Move focus to the menu panel so keyboard events like Escape still work. Also this will