fix(cdk-experimental/menu): don't steal focus on hover

Author: mmalerba

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

@@ -216,7 +216,7 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
 
   /** Subscribe to the menu stack close events and close this menu when requested. */
   private _setMenuStackListener() {
-    this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
+    this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(({item}) => {
       if (item === this.childMenu && this.isOpen()) {
         this.closed.next();
         this._overlayRef!.detach();

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

@@ -128,11 +128,6 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit, OnDestr
   private _subscribeToMouseManager() {
     this._ngZone.runOutsideAngular(() => {
       this.pointerTracker = new PointerFocusTracker(this.items);
-      this.pointerTracker.entered.pipe(takeUntil(this.destroyed)).subscribe(item => {
-        if (this.hasOpenSubmenu()) {
-          this.keyManager.setActiveItem(item);
-        }
-      });
     });
   }
 

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

@@ -105,15 +105,19 @@ export abstract class CdkMenuBase
    * Close the open menu if the current active item opened the requested MenuStackItem.
    * @param item the MenuStackItem requested to be closed.
    */
-  protected closeOpenMenu(menu: MenuStackItem | undefined) {
+  protected closeOpenMenu(menu: MenuStackItem | undefined, focusTrigger?: boolean) {
     const keyManager = this.keyManager;
     const trigger = this.openItem;
     if (menu === trigger?.getMenuTrigger()?.getMenu()) {
       trigger?.getMenuTrigger()?.close();
       // If the user has moused over a sibling item we want to focus the element under mouse focus
       // not the trigger which previously opened the now closed menu.
-      if (trigger) {
-        keyManager.setActiveItem(this.pointerTracker?.activeElement || trigger);
+      if (focusTrigger) {
+        if (trigger) {
+          keyManager.setActiveItem(trigger);
+        } else {
+          keyManager.setFirstItemActive();
+        }
       }
     }
   }
@@ -157,6 +161,6 @@ export abstract class CdkMenuBase
   private _subscribeToMenuStackClosed() {
     this.menuStack.closed
       .pipe(takeUntil(this.destroyed))
-      .subscribe(item => this.closeOpenMenu(item));
+      .subscribe(({item, focusParentMenu}) => this.closeOpenMenu(item, focusParentMenu));
   }
 }

src/cdk-experimental/menu/menu-item-trigger.ts

@@ -278,7 +278,7 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy {
    */
   private _registerCloseHandler() {
     if (!this._parentMenu) {
-      this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
+      this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(({item}) => {
         if (item === this.childMenu) {
           this.close();
         }

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

@@ -45,9 +45,7 @@ import {MENU_AIM, MenuAim, Toggler} from './menu-aim';
     'class': 'cdk-menu-item',
     '[attr.aria-disabled]': 'disabled || null',
     '(blur)': '_resetTabIndex()',
-    '(mouseout)': '_resetTabIndex()',
     '(focus)': '_setTabIndex()',
-    '(mouseenter)': '_setTabIndex($event)',
     '(click)': 'trigger()',
     '(keydown)': '_onKeydown($event)',
   },
@@ -190,38 +188,41 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
 
       case RIGHT_ARROW:
         if (this._parentMenu && this._isParentVertical()) {
-          if (this._dir?.value === 'rtl') {
-            if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
-              event.preventDefault();
-              this._menuStack.close(this._parentMenu, FocusNext.previousItem);
-            }
-          } else if (!this.hasMenu()) {
-            if (this._menuStack.hasInlineMenu()) {
-              event.preventDefault();
-              this._menuStack.closeAll(FocusNext.nextItem);
-            }
+          if (this._dir?.value !== 'rtl') {
+            this._forwardArrowPressed(event);
+          } else {
+            this._backArrowPressed(event);
           }
         }
         break;
 
       case LEFT_ARROW:
         if (this._parentMenu && this._isParentVertical()) {
           if (this._dir?.value !== 'rtl') {
-            if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
-              event.preventDefault();
-              this._menuStack.close(this._parentMenu, FocusNext.previousItem);
-            }
-          } else if (!this.hasMenu()) {
-            if (this._menuStack.hasInlineMenu()) {
-              event.preventDefault();
-              this._menuStack.closeAll(FocusNext.nextItem);
-            }
+            this._backArrowPressed(event);
+          } else {
+            this._forwardArrowPressed(event);
           }
         }
         break;
     }
   }
 
+  private _backArrowPressed(event: KeyboardEvent) {
+    const parentMenu = this._parentMenu!;
+    if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
+      event.preventDefault();
+      this._menuStack.close(parentMenu, FocusNext.previousItem, true);
+    }
+  }
+
+  private _forwardArrowPressed(event: KeyboardEvent) {
+    if (!this.hasMenu() && this._menuStack.hasInlineMenu()) {
+      event.preventDefault();
+      this._menuStack.closeAll(FocusNext.nextItem);
+    }
+  }
+
   /**
    * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
    * into.

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

@@ -56,7 +56,7 @@ describe('MenuStack', () => {
       menuStack.closeAll();
 
       expect(spy).toHaveBeenCalledTimes(3);
-      const callArgs = spy.calls.all().map((v: jasmine.CallInfo<jasmine.Func>) => v.args[0]);
+      const callArgs = spy.calls.all().map((v: jasmine.CallInfo<jasmine.Func>) => v.args[0].item);
       expect(callArgs).toEqual(menus.reverse());
       expect(menuStack.isEmpty()).toBeTrue();
     },

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

@@ -41,6 +41,11 @@ export const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER = {
   useFactory: (parentMenuStack?: MenuStack) => parentMenuStack || MenuStack.inline(),
 };
 
+export interface MenuStackCloseEvent {
+  item: MenuStackItem | undefined;
+  focusParentMenu?: boolean;
+}
+
 /**
  * MenuStack allows subscribers to listen for close events (when a MenuStackItem is popped off
  * of the stack) in order to perform closing actions. Upon the MenuStack being empty it emits
@@ -53,13 +58,13 @@ 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<MenuStackItem | undefined> = new Subject();
+  private readonly _close: Subject<MenuStackCloseEvent> = new Subject();
 
   /** Emits once the MenuStack has become empty after popping off elements. */
   private readonly _empty: Subject<FocusNext | undefined> = new Subject();
 
   /** Observable which emits the MenuStackItem which has been requested to close. */
-  readonly closed: Observable<MenuStackItem | undefined> = this._close;
+  readonly closed: Observable<MenuStackCloseEvent> = this._close;
 
   /**
    * Observable which emits when the MenuStack is empty after popping off the last element. It
@@ -87,14 +92,15 @@ export class MenuStack {
    * @param lastItem the last item to pop off the stack.
    * @param focusNext the event to emit on the `empty` observable if the method call resulted in an
    * empty stack. Does not emit if the stack was initially empty or if `lastItem` was not on the
+   * @param focusParentMenu Whether to focus the parent menu after closing current one.
    * stack.
    */
-  close(lastItem: MenuStackItem, focusNext?: FocusNext) {
+  close(lastItem: MenuStackItem, focusNext?: FocusNext, focusParentMenu = false) {
     if (this._elements.indexOf(lastItem) >= 0) {
       let poppedElement: MenuStackItem | undefined;
       do {
         poppedElement = this._elements.pop();
-        this._close.next(poppedElement);
+        this._close.next({item: poppedElement, focusParentMenu});
       } while (poppedElement !== lastItem);
 
       if (this.isEmpty()) {
@@ -114,7 +120,7 @@ export class MenuStack {
     if (this._elements.indexOf(lastItem) >= 0) {
       removed = this.peek() !== lastItem;
       while (this.peek() !== lastItem) {
-        this._close.next(this._elements.pop());
+        this._close.next({item: this._elements.pop()});
       }
     }
     return removed;
@@ -125,12 +131,12 @@ export class MenuStack {
    * @param focusNext the event to emit on the `empty` observable once the stack is emptied. Does
    * not emit if the stack was initially empty.
    */
-  closeAll(focusNext?: FocusNext) {
+  closeAll(focusNext?: FocusNext, focusParentMenu = false) {
     if (!this.isEmpty()) {
       while (!this.isEmpty()) {
         const menuStackItem = this._elements.pop();
         if (menuStackItem) {
-          this._close.next(menuStackItem);
+          this._close.next({item: menuStackItem, focusParentMenu});
         }
       }
 

src/cdk-experimental/menu/menu.ts

@@ -130,12 +130,12 @@ export class CdkMenu extends CdkMenuBase implements AfterContentInit, OnDestroy
       case ESCAPE:
         if (!hasModifierKey(event)) {
           event.preventDefault();
-          this.menuStack.close(this, FocusNext.currentItem);
+          this.menuStack.close(this, FocusNext.currentItem, true);
         }
         break;
 
       case TAB:
-        this.menuStack.closeAll();
+        this.menuStack.closeAll(undefined, true);
         break;
 
       default:
@@ -174,9 +174,6 @@ export class CdkMenu extends CdkMenuBase implements AfterContentInit, OnDestroy
   private _subscribeToMouseManager() {
     this._ngZone.runOutsideAngular(() => {
       this.pointerTracker = new PointerFocusTracker(this.items);
-      this.pointerTracker.entered
-        .pipe(takeUntil(this.closed))
-        .subscribe(item => this.keyManager.setActiveItem(item));
     });
   }