fix(cdk-experimental/menu): stop inline menu triggers capturing focus

Author: mmalerba

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

@@ -38,7 +38,6 @@ import {CdkMenuBase} from './menu-base';
   host: {
     'role': 'menubar',
     'class': 'cdk-menu-bar',
-    'tabindex': '0',
     '(keydown)': '_handleKeyEvent($event)',
   },
   providers: [
@@ -52,6 +51,8 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit, OnDestr
 
   override menuStack: MenuStack;
 
+  override _isInline = true;
+
   constructor(
     private readonly _ngZone: NgZone,
     elementRef: ElementRef<HTMLElement>,

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

@@ -28,8 +28,11 @@ import {PointerFocusTracker} from './pointer-focus-tracker';
 
 @Directive({
   host: {
+    '[tabindex]': '_isInline ? (_hasFocus ? -1 : 0) : null',
     '[attr.aria-orientation]': 'orientation',
     '(focus)': 'focusFirstItem()',
+    '(focusin)': 'menuStack.setHasFocus(true)',
+    '(focusout)': 'menuStack.setHasFocus(false)',
   },
 })
 export abstract class CdkMenuBase
@@ -42,6 +45,10 @@ export abstract class CdkMenuBase
    */
   orientation: 'horizontal' | 'vertical' = 'vertical';
 
+  _isInline = false;
+
+  _hasFocus = false;
+
   /** All child MenuItem elements nested in this Menu. */
   @ContentChildren(CdkMenuItem, {descendants: true})
   protected readonly items: QueryList<CdkMenuItem>;
@@ -69,6 +76,7 @@ export abstract class CdkMenuBase
   override ngAfterContentInit() {
     super.ngAfterContentInit();
     this._setKeyManager();
+    this._subscribeToHasFocus();
     this._subscribeToMenuOpen();
     this._subscribeToMenuStackClosed();
   }
@@ -163,4 +171,12 @@ export abstract class CdkMenuBase
       .pipe(takeUntil(this.destroyed))
       .subscribe(({item, focusParentMenu}) => this.closeOpenMenu(item, focusParentMenu));
   }
+
+  private _subscribeToHasFocus() {
+    if (this._isInline) {
+      this.menuStack.hasFocus.pipe(takeUntil(this.destroyed)).subscribe(hasFocus => {
+        this._hasFocus = hasFocus;
+      });
+    }
+  }
 }

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

@@ -8,6 +8,7 @@
 
 import {Inject, Injectable, InjectionToken, Optional, SkipSelf} from '@angular/core';
 import {Observable, Subject} from 'rxjs';
+import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
 
 /** Events to emit as specified by the caller once the MenuStack is empty. */
 export const enum FocusNext {
@@ -58,14 +59,22 @@ export class MenuStack {
   private readonly _elements: MenuStackItem[] = [];
 
   /** Emits the element which was popped off of the stack when requested by a closer. */
-  private readonly _close: Subject<MenuStackCloseEvent> = new Subject();
+  private readonly _close = new Subject<MenuStackCloseEvent>();
 
   /** Emits once the MenuStack has become empty after popping off elements. */
-  private readonly _empty: Subject<FocusNext | undefined> = new Subject();
+  private readonly _empty = new Subject<FocusNext | undefined>();
+
+  private readonly _hasFocus = new Subject<boolean>();
 
   /** Observable which emits the MenuStackItem which has been requested to close. */
   readonly closed: Observable<MenuStackCloseEvent> = this._close;
 
+  readonly hasFocus: Observable<boolean> = this._hasFocus.pipe(
+    startWith(false),
+    debounceTime(0),
+    distinctUntilChanged(),
+  );
+
   /**
    * Observable which emits when the MenuStack is empty after popping off the last element. It
    * emits a FocusNext event which specifies the action the closer has requested the listener
@@ -162,4 +171,8 @@ export class MenuStack {
   hasInlineMenu() {
     return this._hasInlineMenu;
   }
+
+  setHasFocus(hasFocus: boolean) {
+    this._hasFocus.next(hasFocus);
+  }
 }

src/cdk-experimental/menu/menu.ts

@@ -57,8 +57,7 @@ import {CdkMenuBase} from './menu-base';
   host: {
     'role': 'menu',
     'class': 'cdk-menu',
-    '[tabindex]': '_isInline() ? 0 : null',
-    '[class.cdk-menu-inline]': '_isInline()',
+    '[class.cdk-menu-inline]': '_isInline',
     '(keydown)': '_handleKeyEvent($event)',
   },
   providers: [
@@ -75,6 +74,8 @@ export class CdkMenu extends CdkMenuBase implements AfterContentInit, OnDestroy
   @ContentChildren(CdkMenuGroup, {descendants: true})
   private readonly _nestedGroups: QueryList<CdkMenuGroup>;
 
+  override _isInline = !this._parentTrigger;
+
   constructor(
     private readonly _ngZone: NgZone,
     elementRef: ElementRef<HTMLElement>,
@@ -85,7 +86,7 @@ export class CdkMenu extends CdkMenuBase implements AfterContentInit, OnDestroy
   ) {
     super(elementRef, menuStack, dir);
     this.destroyed.subscribe(this.closed);
-    if (!this._isInline()) {
+    if (!this._isInline) {
       this.menuStack.push(this);
     }
     this._parentTrigger?.registerChildMenu(this);
@@ -200,14 +201,6 @@ export class CdkMenu extends CdkMenuBase implements AfterContentInit, OnDestroy
     }
   }
 
-  /**
-   * Return true if this menu is an inline menu. That is, it does not exist in a pop-up and is
-   * always visible in the dom.
-   */
-  _isInline() {
-    return !this._parentTrigger;
-  }
-
   private _subscribeToMenuStackEmptied() {
     this.menuStack.emptied
       .pipe(takeUntil(this.destroyed))