fix(material/menu): unable to move focus from inside opened event (#2…

…0968)

We move focus inside the menu after we've dispatched the `menuOpened` event
which means that we'll override any focus that the consumer may have set inside
the handler. These changes fix the issue by changing the order.

Fixes #20965.

(cherry picked from commit d3cdb34)

src/material-experimental/mdc-menu/menu.spec.ts

@@ -1044,6 +1044,21 @@ describe('MDC-based MatMenu', () => {
         .toBe(false);
   });
 
+  it('should be able to move focus inside the `open` event', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.menuOpened.subscribe(() => {
+      (document.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]')[3] as HTMLElement).focus();
+    });
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const items = document.querySelectorAll('.mat-mdc-menu-panel [mat-menu-item]');
+    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+  }));
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);

src/material/menu/menu-trigger.ts

@@ -339,8 +339,8 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     this.menu.parentMenu = this.triggersSubmenu() ? this._parentMaterialMenu : undefined;
     this.menu.direction = this.dir;
     this._setMenuElevation();
-    this._setIsMenuOpen(true);
     this.menu.focusFirstItem(this._openedBy || 'program');
+    this._setIsMenuOpen(true);
   }
 
   /** Updates the menu elevation based on the amount of parent menus that it has. */

src/material/menu/menu.spec.ts

@@ -987,6 +987,21 @@ describe('MatMenu', () => {
         .toBe(false);
   });
 
+  it('should be able to move focus inside the `open` event', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.menuOpened.subscribe(() => {
+      (document.querySelectorAll('.mat-menu-panel [mat-menu-item]')[3] as HTMLElement).focus();
+    });
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    const items = document.querySelectorAll('.mat-menu-panel [mat-menu-item]');
+    expect(document.activeElement).toBe(items[3], 'Expected fourth item to be focused');
+  }));
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);