fix(menu): internal focus state out of sync if item is focused programmatically

Fixes the internal key manager of the menu being out of sync if one of the menu items is focused via its `focus` method.

Fixes #17761.

Author: crisbeto

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

@@ -817,6 +817,37 @@ describe('MDC-based MatMenu', () => {
       flush();
     }));
 
+  it('should sync the focus order when an item is focused programmatically', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenuWithRepeater);
+
+    // Add some more items to work with.
+    for (let i = 0; i < 5; i++) {
+      fixture.componentInstance.items.push({label: `Extra ${i}`, disabled: false});
+    }
+
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const menuPanel = document.querySelector('.mat-mdc-menu-panel')!;
+    const items = menuPanel.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]');
+
+    expect(document.activeElement).toBe(items[0], 'Expected first item to be focused on open');
+
+    fixture.componentInstance.itemInstances.toArray()[3].focus();
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+
+    dispatchKeyboardEvent(menuPanel, 'keydown', DOWN_ARROW);
+    fixture.detectChanges();
+    tick();
+
+    expect(document.activeElement).toBe(items[4], 'Expected fifth item to be focused');
+    flush();
+  }));
+
   it('should focus the menu panel if all items are disabled', fakeAsync(() => {
     const fixture = createComponent(SimpleMenuWithRepeater, [], [FakeIcon]);
     fixture.componentInstance.items.forEach(item => item.disabled = true);
@@ -2443,5 +2474,6 @@ class MenuWithCheckboxItems {
 class SimpleMenuWithRepeater {
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
   @ViewChild(MatMenu) menu: MatMenu;
+  @ViewChildren(MatMenuItem) itemInstances: QueryList<MatMenuItem>;
   items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
 }

src/material/menu/menu-item.ts

@@ -66,6 +66,9 @@ export class MatMenuItem extends _MatMenuItemMixinBase
   /** Stream that emits when the menu item is hovered. */
   readonly _hovered: Subject<MatMenuItem> = new Subject<MatMenuItem>();
 
+  /** Stream that emits when the menu item is focused. */
+  readonly _focused = new Subject<MatMenuItem>();
+
   /** Whether the menu item is highlighted. */
   _highlighted: boolean = false;
 
@@ -102,6 +105,8 @@ export class MatMenuItem extends _MatMenuItemMixinBase
     } else {
       this._getHostElement().focus(options);
     }
+
+    this._focused.next(this);
   }
 
   ngOnDestroy() {
@@ -114,6 +119,7 @@ export class MatMenuItem extends _MatMenuItemMixinBase
     }
 
     this._hovered.complete();
+    this._focused.complete();
   }
 
   /** Used to set the `tabindex`. */

src/material/menu/menu.spec.ts

@@ -933,6 +933,37 @@ describe('MatMenu', () => {
         flush();
       }));
 
+    it('should sync the focus order when an item is focused programmatically', fakeAsync(() => {
+      const fixture = createComponent(SimpleMenuWithRepeater);
+
+      // Add some more items to work with.
+      for (let i = 0; i < 5; i++) {
+        fixture.componentInstance.items.push({label: `Extra ${i}`, disabled: false});
+      }
+
+      fixture.detectChanges();
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+      tick(500);
+
+      const menuPanel = document.querySelector('.mat-menu-panel')!;
+      const items = menuPanel.querySelectorAll('.mat-menu-panel [mat-menu-item]');
+
+      expect(document.activeElement).toBe(items[0], 'Expected first item to be focused on open');
+
+      fixture.componentInstance.itemInstances.toArray()[3].focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+
+      dispatchKeyboardEvent(menuPanel, 'keydown', DOWN_ARROW);
+      fixture.detectChanges();
+      tick();
+
+      expect(document.activeElement).toBe(items[4], 'Expected fifth item to be focused');
+      flush();
+    }));
+
     it('should open submenus when the menu is inside an OnPush component', fakeAsync(() => {
       const fixture = createComponent(LazyMenuWithOnPush);
       fixture.detectChanges();
@@ -2432,6 +2463,7 @@ class MenuWithCheckboxItems {
 class SimpleMenuWithRepeater {
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
   @ViewChild(MatMenu) menu: MatMenu;
+  @ViewChildren(MatMenuItem) itemInstances: QueryList<MatMenuItem>;
   items = [{label: 'Pizza', disabled: false}, {label: 'Pasta', disabled: false}];
 }
 

src/material/menu/menu.ts

@@ -251,6 +251,13 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
     this._updateDirectDescendants();
     this._keyManager = new FocusKeyManager(this._directDescendantItems).withWrap().withTypeAhead();
     this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.closed.emit('tab'));
+
+    // We don't need to unsubscribe here because _focused is
+    // internal and we know that it gets completed on destroy.
+    this._directDescendantItems.changes.pipe(
+      startWith(this._directDescendantItems),
+      switchMap(items => merge<MatMenuItem>(...items.map((item: MatMenuItem) => item._focused)))
+    ).subscribe(focusedItem => this._keyManager.updateActiveItem(focusedItem));
   }
 
   ngOnDestroy() {

tools/public_api_guard/material/menu.d.ts

@@ -91,6 +91,7 @@ export interface MatMenuDefaultOptions {
 }
 
 export declare class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOption, CanDisable, CanDisableRipple, OnDestroy {
+    readonly _focused: Subject<MatMenuItem>;
     _highlighted: boolean;
     readonly _hovered: Subject<MatMenuItem>;
     _parentMenu?: MatMenuPanel<MatMenuItem> | undefined;