feat(cdk/menu): add setActiveMenuItem to cdkMenu (#31371)

closes #31370+

Author: chintankavathia

goldens/cdk/menu/index.api.md

@@ -107,6 +107,7 @@ export abstract class CdkMenuBase extends CdkMenuGroup implements Menu, AfterCon
     protected ngZone: NgZone;
     orientation: 'horizontal' | 'vertical';
     protected pointerTracker?: PointerFocusTracker<CdkMenuItem>;
+    setActiveMenuItem(item: number | CdkMenuItem): void;
     protected triggerItem?: CdkMenuItem;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuBase, never, never, { "id": { "alias": "id"; "required": false; }; }, {}, ["items"], never, true, never>;

src/cdk/menu/menu-base.ts

@@ -141,6 +141,20 @@ export abstract class CdkMenuBase
     this.keyManager.setLastItemActive();
   }
 
+  /**
+   * Sets the active item to the item at the specified index and focuses the newly active item.
+   * @param item The index of the item to be set as active, or the CdkMenuItem instance.
+   */
+  setActiveMenuItem(item: number | CdkMenuItem) {
+    if (this.keyManager) {
+      if (typeof item === 'number') {
+        this.keyManager.setActiveItem(item);
+      } else {
+        this.keyManager.setActiveItem(item);
+      }
+    }
+  }
+
   /** Gets the tabindex for this menu. */
   _getTabIndex() {
     return this._tabIndexSignal();

src/cdk/menu/menu.spec.ts

@@ -502,6 +502,31 @@ describe('Menu', () => {
       }));
     });
   });
+
+  describe('menu with active item', () => {
+    let fixture: ComponentFixture<MenuWithActiveItem>;
+    let nativeMenuItems: HTMLElement[];
+
+    beforeEach(waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule, MenuWithActiveItem],
+      });
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MenuWithActiveItem);
+      fixture.detectChanges();
+
+      nativeMenuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map(e => e.nativeElement);
+    });
+
+    it('should set the active item with setActiveMenuItem', () => {
+      fixture.componentInstance.menu.setActiveMenuItem(2);
+      expect(document.activeElement).toEqual(nativeMenuItems[2]);
+    });
+  });
 });
 
 @Component({
@@ -655,3 +680,18 @@ class WithComplexNestedMenusOnBottom {
 
   @ViewChildren(CdkMenu) menus: QueryList<CdkMenu>;
 }
+
+@Component({
+  template: `
+    <div cdkMenu>
+      <button cdkMenuItem>Inbox</button>
+      <button cdkMenuItem>Starred</button>
+      <button cdkMenuItem>Foo</button>
+      <button cdkMenuItem>Bar</button>
+    </div>
+  `,
+  imports: [CdkMenuModule],
+})
+class MenuWithActiveItem {
+  @ViewChild(CdkMenu) menu: CdkMenu;
+}