fix(material/menu): position classes not update when window is resized

Relates to internal bug b/218602349. We were calling `MatMenu.setPositionClasses` in order to set the classes if the position changes, but the call was outside of the `NgZone` so nothing was happening. These changes bring the call back into the `NgZone`.

Author: crisbeto

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

@@ -1331,6 +1331,29 @@ describe('MDC-based MatMenu', () => {
       expect(panel.classList).not.toContain('mat-menu-above');
     }));
 
+    it('should update the position classes if the window is resized', fakeAsync(() => {
+      trigger.style.position = 'fixed';
+      trigger.style.top = '300px';
+      fixture.componentInstance.yPosition = 'above';
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+      tick(500);
+
+      const panel = overlayContainerElement.querySelector('.mat-mdc-menu-panel') as HTMLElement;
+
+      expect(panel.classList).toContain('mat-menu-above');
+      expect(panel.classList).not.toContain('mat-menu-below');
+
+      trigger.style.top = '0';
+      dispatchFakeEvent(window, 'resize');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+
+      expect(panel.classList).not.toContain('mat-menu-above');
+      expect(panel.classList).toContain('mat-menu-below');
+    }));
+
     it('should be able to update the position after the first open', fakeAsync(() => {
       trigger.style.position = 'fixed';
       trigger.style.top = '200px';

src/material/menu/menu-trigger.ts

@@ -32,6 +32,7 @@ import {
   Inject,
   InjectionToken,
   Input,
+  NgZone,
   OnDestroy,
   Optional,
   Output,
@@ -200,6 +201,22 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     focusMonitor?: FocusMonitor | null,
   );
 
+  /**
+   * @deprecated `ngZone` will become a required parameter.
+   * @breaking-change 15.0.0
+   */
+  constructor(
+    overlay: Overlay,
+    element: ElementRef<HTMLElement>,
+    viewContainerRef: ViewContainerRef,
+    scrollStrategy: any,
+    parentMenu: MatMenuPanel,
+    menuItemInstance: MatMenuItem,
+    dir: Directionality,
+    focusMonitor: FocusMonitor,
+    ngZone?: NgZone,
+  );
+
   constructor(
     private _overlay: Overlay,
     private _element: ElementRef<HTMLElement>,
@@ -211,6 +228,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     @Optional() @Self() private _menuItemInstance: MatMenuItem,
     @Optional() private _dir: Directionality,
     private _focusMonitor: FocusMonitor | null,
+    private _ngZone?: NgZone,
   ) {
     this._scrollStrategy = scrollStrategy;
     this._parentMaterialMenu = parentMenu instanceof _MatMenuBase ? parentMenu : undefined;
@@ -472,7 +490,14 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
         const posX: MenuPositionX = change.connectionPair.overlayX === 'start' ? 'after' : 'before';
         const posY: MenuPositionY = change.connectionPair.overlayY === 'top' ? 'below' : 'above';
 
-        this.menu.setPositionClasses!(posX, posY);
+        // @breaking-change 15.0.0 Remove null check for `ngZone`.
+        // `positionChanges` fires outside of the `ngZone` and `setPositionClasses` might be
+        // updating something in the view so we need to bring it back in.
+        if (this._ngZone) {
+          this._ngZone.run(() => this.menu.setPositionClasses!(posX, posY));
+        } else {
+          this.menu.setPositionClasses!(posX, posY);
+        }
       });
     }
   }

src/material/menu/menu.spec.ts

@@ -1326,6 +1326,29 @@ describe('MatMenu', () => {
       expect(panel.classList).not.toContain('mat-menu-above');
     }));
 
+    it('should update the position classes if the window is resized', fakeAsync(() => {
+      trigger.style.position = 'fixed';
+      trigger.style.top = '300px';
+      fixture.componentInstance.yPosition = 'above';
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+      tick(500);
+
+      const panel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+
+      expect(panel.classList).toContain('mat-menu-above');
+      expect(panel.classList).not.toContain('mat-menu-below');
+
+      trigger.style.top = '0';
+      dispatchFakeEvent(window, 'resize');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+
+      expect(panel.classList).not.toContain('mat-menu-above');
+      expect(panel.classList).toContain('mat-menu-below');
+    }));
+
     it('should be able to update the position after the first open', fakeAsync(() => {
       trigger.style.position = 'fixed';
       trigger.style.top = '200px';

tools/public_api_guard/material/menu.md

@@ -282,6 +282,8 @@ export class MatMenuTrigger extends _MatMenuTriggerBase {
 export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy {
     // @deprecated
     constructor(overlay: Overlay, element: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parentMenu: MatMenuPanel, menuItemInstance: MatMenuItem, dir: Directionality, focusMonitor?: FocusMonitor | null);
+    // @deprecated
+    constructor(overlay: Overlay, element: ElementRef<HTMLElement>, viewContainerRef: ViewContainerRef, scrollStrategy: any, parentMenu: MatMenuPanel, menuItemInstance: MatMenuItem, dir: Directionality, focusMonitor: FocusMonitor, ngZone?: NgZone);
     closeMenu(): void;
     // @deprecated (undocumented)
     get _deprecatedMatMenuTriggerFor(): MatMenuPanel;
@@ -315,7 +317,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<_MatMenuTriggerBase, never, never, { "_deprecatedMatMenuTriggerFor": "mat-menu-trigger-for"; "menu": "matMenuTriggerFor"; "menuData": "matMenuTriggerData"; "restoreFocus": "matMenuTriggerRestoreFocus"; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<_MatMenuTriggerBase, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_MatMenuTriggerBase, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }, null, null]>;
 }
 
 // @public