fix(cdk-experimental/menu): fix bug preventing keyboard event handling if opened programmatically (#20004)

If a menu is opened programmatically, subsequent keyboard events to close it out are not handled.
This fixes the issue by tracking the open sub-menu regardless of how it was opened up.

Author: andy9775

src/cdk-experimental/menu/menu-bar.spec.ts

@@ -452,6 +452,27 @@ describe('MenuBar', () => {
 
           expect(document.activeElement).toEqual(fileMenuNativeItems[1]);
         }));
+
+        it('should handle keyboard actions if initial menu is opened programmatically', () => {
+          fixture.debugElement
+              .queryAll(By.directive(CdkMenuItem))[0]
+              .injector.get(CdkMenuItem)
+              .getMenuTrigger()!
+              .openMenu();
+          detectChanges();
+          fixture.debugElement
+              .queryAll(By.directive(CdkMenuItem))[2]
+              .injector.get(CdkMenuItem)
+              .getMenuTrigger()!
+              .openMenu();
+          detectChanges();
+
+          fileMenuNativeItems[0].focus();
+          dispatchKeyboardEvent(fileMenuNativeItems[0], 'keydown', TAB);
+          detectChanges();
+
+          expect(nativeMenus.length).toBe(0);
+        });
       });
     });
 

src/cdk-experimental/menu/menu-bar.ts

@@ -18,12 +18,12 @@ import {
 import {Directionality} from '@angular/cdk/bidi';
 import {FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y';
 import {LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW, ESCAPE, TAB} from '@angular/cdk/keycodes';
+import {takeUntil, mergeAll, mapTo, startWith, mergeMap, switchMap} from 'rxjs/operators';
+import {Subject, merge} from 'rxjs';
 import {CdkMenuGroup} from './menu-group';
 import {CDK_MENU, Menu} from './menu-interface';
 import {CdkMenuItem} from './menu-item';
 import {MenuStack, MenuStackItem, FocusNext} from './menu-stack';
-import {Subject} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
 
 /**
  * Directive applied to an element which configures it as a MenuBar by setting the appropriate
@@ -64,6 +64,9 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
   @ContentChildren(CdkMenuItem, {descendants: true})
   private readonly _allItems: QueryList<CdkMenuItem>;
 
+  /** The Menu Item which triggered the open submenu. */
+  private _openItem?: CdkMenuItem;
+
   constructor(readonly _menuStack: MenuStack, @Optional() private readonly _dir?: Directionality) {
     super();
   }
@@ -72,6 +75,7 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
     super.ngAfterContentInit();
 
     this._setKeyManager();
+    this._subscribeToMenuOpen();
     this._subscribeToMenuStack();
   }
 
@@ -163,12 +167,13 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
    * Close the open menu if the current active item opened the requested MenuStackItem.
    * @param item the MenuStackItem requested to be closed.
    */
-  private _closeOpenMenu(item: MenuStackItem) {
+  private _closeOpenMenu(menu: MenuStackItem) {
+    const trigger = this._openItem;
     const keyManager = this._keyManager;
-    if (item === keyManager.activeItem?.getMenu()) {
-      keyManager.activeItem.getMenuTrigger()?.closeMenu();
+    if (menu === trigger?.getMenuTrigger()?.getMenu()) {
+      trigger.getMenuTrigger()?.closeMenu();
       keyManager.setFocusOrigin('keyboard');
-      keyManager.setActiveItem(keyManager.activeItem);
+      keyManager.setActiveItem(trigger);
     }
   }
 
@@ -207,6 +212,30 @@ export class CdkMenuBar extends CdkMenuGroup implements Menu, AfterContentInit,
     return this.orientation === 'horizontal';
   }
 
+  /**
+   * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
+   * and stop tracking it when the menu is closed.
+   */
+  private _subscribeToMenuOpen() {
+    const exitCondition = merge(this._allItems.changes, this._destroyed);
+    this._allItems.changes
+      .pipe(
+        startWith(this._allItems),
+        mergeMap((list: QueryList<CdkMenuItem>) =>
+          list
+            .filter(item => item.hasMenu())
+            .map(item => item.getMenuTrigger()!.opened.pipe(mapTo(item), takeUntil(exitCondition)))
+        ),
+        mergeAll(),
+        switchMap((item: CdkMenuItem) => {
+          this._openItem = item;
+          return item.getMenuTrigger()!.closed;
+        }),
+        takeUntil(this._destroyed)
+      )
+      .subscribe(() => (this._openItem = undefined));
+  }
+
   ngOnDestroy() {
     super.ngOnDestroy();
     this._destroyed.next();

src/cdk-experimental/menu/menu.ts

@@ -29,7 +29,8 @@ import {
   hasModifierKey,
 } from '@angular/cdk/keycodes';
 import {Directionality} from '@angular/cdk/bidi';
-import {take, takeUntil} from 'rxjs/operators';
+import {take, takeUntil, startWith, mergeMap, mapTo, mergeAll, switchMap} from 'rxjs/operators';
+import {merge} from 'rxjs';
 import {CdkMenuGroup} from './menu-group';
 import {CdkMenuPanel} from './menu-panel';
 import {Menu, CDK_MENU} from './menu-interface';
@@ -81,6 +82,9 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
   @ContentChildren(CdkMenuItem, {descendants: true})
   private readonly _allItems: QueryList<CdkMenuItem>;
 
+  /** The Menu Item which triggered the open submenu. */
+  private _openItem?: CdkMenuItem;
+
   /**
    * A reference to the enclosing parent menu panel.
    *
@@ -106,6 +110,7 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
 
     this._completeChangeEmitter();
     this._setKeyManager();
+    this._subscribeToMenuOpen();
     this._subscribeToMenuStack();
   }
 
@@ -227,12 +232,13 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
    * Close the open menu if the current active item opened the requested MenuStackItem.
    * @param item the MenuStackItem requested to be closed.
    */
-  private _closeOpenMenu(item: MenuStackItem) {
+  private _closeOpenMenu(menu: MenuStackItem) {
     const keyManager = this._keyManager;
-    if (item === keyManager.activeItem?.getMenu()) {
-      keyManager.activeItem.getMenuTrigger()?.closeMenu();
+    const trigger = this._openItem;
+    if (menu === trigger?.getMenuTrigger()?.getMenu()) {
+      trigger.getMenuTrigger()?.closeMenu();
       keyManager.setFocusOrigin('keyboard');
-      keyManager.setActiveItem(keyManager.activeItem);
+      keyManager.setActiveItem(trigger);
     }
   }
 
@@ -259,6 +265,31 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
     }
   }
 
+  // TODO(andy9775): remove duplicate logic between menu an menu bar
+  /**
+   * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
+   * and stop tracking it when the menu is closed.
+   */
+  private _subscribeToMenuOpen() {
+    const exitCondition = merge(this._allItems.changes, this.closed);
+    this._allItems.changes
+      .pipe(
+        startWith(this._allItems),
+        mergeMap((list: QueryList<CdkMenuItem>) =>
+          list
+            .filter(item => item.hasMenu())
+            .map(item => item.getMenuTrigger()!.opened.pipe(mapTo(item), takeUntil(exitCondition)))
+        ),
+        mergeAll(),
+        switchMap((item: CdkMenuItem) => {
+          this._openItem = item;
+          return item.getMenuTrigger()!.closed;
+        }),
+        takeUntil(this.closed)
+      )
+      .subscribe(() => (this._openItem = undefined));
+  }
+
   /** Return true if this menu has been configured in a horizontal orientation. */
   private _isHorizontal() {
     return this.orientation === 'horizontal';