fixup! fix(cdk-experimental/menu) make trigger items behave like normal items when pressing left/right

Author: mmalerba

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

@@ -68,7 +68,6 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit, OnDestr
     super.ngAfterContentInit();
     this._subscribeToMenuStackEmptied();
     this._subscribeToMouseManager();
-
     this._menuAim?.initialize(this, this.pointerTracker!);
   }
 
@@ -132,8 +131,6 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit, OnDestr
     this._ngZone.runOutsideAngular(() => {
       this.pointerTracker = new PointerFocusTracker(this.items);
       this.pointerTracker.entered.pipe(takeUntil(this.destroyed)).subscribe(item => {
-        // TODO(mmalerba): Why does the menu bar do this in a hasOpenSubmenu check
-        //   when menu just does it regardless?
         if (this.hasOpenSubmenu()) {
           this.keyManager.setActiveItem(item);
         }
@@ -151,8 +148,6 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit, OnDestr
       case FocusNext.nextItem:
         keyManager.setFocusOrigin('keyboard');
         keyManager.setNextItemActive();
-        // TODO(mmalerba): This seems similar to what menu does, but menu bar also calls openMenu
-        //  figure out why this is different.
         keyManager.activeItem?.getMenuTrigger()?.openMenu();
         break;
 

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

@@ -36,7 +36,7 @@ import {DOWN_ARROW, ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE, UP_ARROW} from '@angu
 import {fromEvent, merge, Subject} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
 import {CDK_MENU, Menu} from './menu-interface';
-import {FocusNext, MENU_STACK, MenuStack} from './menu-stack';
+import {MENU_STACK, MenuStack} from './menu-stack';
 import {MENU_AIM, MenuAim} from './menu-aim';
 import {MENU_TRIGGER, MenuTrigger} from './menu-trigger';
 

src/cdk-experimental/menu/menu.ts

@@ -141,7 +141,9 @@ export class CdkMenu extends CdkMenuBase implements AfterContentInit, OnDestroy
    * Complete the change emitter if there are any nested MenuGroups or register to complete the
    * change emitter if a MenuGroup is rendered at some point
    */
-  // TODO(mmalerba): I don't understand why we're doing this, seems odd.
+  // TODO(mmalerba): This doesnt' quite work. It causes change events to stop
+  //  firing for radio items directly in the menu if a second group of options
+  //  is added in a menu-group.
   private _completeChangeEmitter() {
     if (this._hasNestedGroups()) {
       this.change.complete();

src/dev-app/cdk-experimental-menu/cdk-menu-demo.css

@@ -3,6 +3,11 @@
   flex-direction: column;
 }
 
+.example-menu .cdk-menu-group {
+  display: flex;
+  flex-direction: column;
+}
+
 .example-menu-container + .example-menu-container {
   /* add some buffer for the opened menu */
   margin-top: 140px;
@@ -28,3 +33,7 @@ demo-custom-position {
   z-index: 1;
   outline: 2px solid;
 }
+
+.cdk-menu-item[aria-checked='true'] {
+  box-shadow: inset 0 0 0 100px rgba(0, 0, 255, 0.5);
+}

src/dev-app/cdk-experimental-menu/cdk-menu-demo.html

@@ -151,3 +151,42 @@ <h4>Custom Context Menu Position (Centered on Cursor)</h4>
     </div>
   </ng-template>
 </div>
+
+<div class="example-menu-container">
+  <h3>Radio items</h3>
+  <button cdkMenuItem [cdkMenuTriggerFor]="sizeMenu">Size menu (items directly in menu)</button>
+  <button cdkMenuItem [cdkMenuTriggerFor]="colorMenu">Color menu (items in menu group)</button>
+  <button cdkMenuItem [cdkMenuTriggerFor]="sizeAndColorMenu">Size & Color menu (items in directly in menu & in menu group)</button>
+
+  <ng-template #sizeMenu>
+    <div class="example-menu" cdkMenu (change)="onSizeChange($event)">
+      <button [checked]="size === 'Small'" cdkMenuItemRadio>Small</button>
+      <button [checked]="size === 'Normal'" cdkMenuItemRadio>Normal</button>
+      <button [checked]="size === 'Large'" cdkMenuItemRadio>Large</button>
+    </div>
+  </ng-template>
+
+  <ng-template #colorMenu>
+    <div class="example-menu" cdkMenu>
+      <div cdkMenuGroup (change)="onColorChange($event)">
+        <button [checked]="color === 'Red'" cdkMenuItemRadio>Red</button>
+        <button [checked]="color === 'Green'" cdkMenuItemRadio>Green</button>
+        <button [checked]="color === 'Blue'" cdkMenuItemRadio>Blue</button>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template #sizeAndColorMenu>
+    <div class="example-menu" cdkMenu (change)="onSizeChange($event)">
+      <button [checked]="size === 'Small'" cdkMenuItemRadio>Small</button>
+      <button [checked]="size === 'Normal'" cdkMenuItemRadio>Normal</button>
+      <button [checked]="size === 'Large'" cdkMenuItemRadio>Large</button>
+      <hr />
+      <div cdkMenuGroup (change)="onColorChange($event)">
+        <button [checked]="color === 'Red'" cdkMenuItemRadio>Red</button>
+        <button [checked]="color === 'Green'" cdkMenuItemRadio>Green</button>
+        <button [checked]="color === 'Blue'" cdkMenuItemRadio>Blue</button>
+      </div>
+    </div>
+  </ng-template>
+</div>

src/dev-app/cdk-experimental-menu/cdk-menu-demo.ts

@@ -8,6 +8,7 @@
 
 import {Component} from '@angular/core';
 import {ConnectedPosition} from '@angular/cdk/overlay';
+import {CdkMenuItem} from '@angular/cdk-experimental/menu';
 
 @Component({
   templateUrl: 'cdk-menu-demo.html',
@@ -17,4 +18,15 @@ export class CdkMenuDemo {
   customPosition = [
     {originX: 'center', originY: 'center', overlayX: 'center', overlayY: 'center'},
   ] as ConnectedPosition[];
+
+  size: string | undefined = 'Normal';
+  color: string | undefined = 'Red';
+
+  onSizeChange(item: CdkMenuItem) {
+    this.size = item._elementRef.nativeElement.textContent?.trim();
+  }
+
+  onColorChange(item: CdkMenuItem) {
+    this.color = item._elementRef.nativeElement.textContent?.trim();
+  }
 }