fix(menu): allow focus to be moved inside menuClosed event (#18756)

The `menuClosed` event is emitted before focus has been restored to the trigger which means that any change that the consumer has made will be overwritten. These changes move the menu's focus restorating slightly earlier in the chain.

Author: crisbeto

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

@@ -188,6 +188,28 @@ describe('MDC-based MatMenu', () => {
     expect(document.activeElement).not.toBe(triggerEl);
   }));
 
+  it('should be able to move focus in the closed event', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    const instance = fixture.componentInstance;
+    fixture.detectChanges();
+    const triggerEl = instance.triggerEl.nativeElement;
+    const button = document.createElement('button');
+    button.setAttribute('tabindex', '0');
+    document.body.appendChild(button);
+
+    triggerEl.click();
+    fixture.detectChanges();
+
+    const subscription = instance.trigger.menuClosed.subscribe(() => button.focus());
+    instance.trigger.closeMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    expect(document.activeElement).toBe(button);
+    document.body.removeChild(button);
+    subscription.unsubscribe();
+  }));
+
   it('should restore focus to the trigger immediately once the menu is closed', () => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();

src/material/menu/menu-trigger.ts

@@ -277,9 +277,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
     }
 
     const menu = this.menu;
-
     this._closingActionsSubscription.unsubscribe();
     this._overlayRef.detach();
+    this._restoreFocus();
 
     if (menu instanceof MatMenu) {
       menu._resetAnimation();
@@ -308,8 +308,6 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
         menu.lazyContent.detach();
       }
     }
-
-    this._restoreFocus();
   }
 
   /**

src/material/menu/menu.spec.ts

@@ -190,6 +190,28 @@ describe('MatMenu', () => {
     expect(document.activeElement).not.toBe(triggerEl);
   }));
 
+  it('should be able to move focus in the closed event', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    const instance = fixture.componentInstance;
+    fixture.detectChanges();
+    const triggerEl = instance.triggerEl.nativeElement;
+    const button = document.createElement('button');
+    button.setAttribute('tabindex', '0');
+    document.body.appendChild(button);
+
+    triggerEl.click();
+    fixture.detectChanges();
+
+    const subscription = instance.trigger.menuClosed.subscribe(() => button.focus());
+    instance.trigger.closeMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    expect(document.activeElement).toBe(button);
+    document.body.removeChild(button);
+    subscription.unsubscribe();
+  }));
+
   it('should restore focus to the trigger immediately once the menu is closed', () => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();