fix(menu): update position on every open

- menu overlay is only created once and the position of the overlay wasn't calculated again

Author: EladBezalel

src/lib/menu/menu-trigger.ts

@@ -308,7 +308,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
    * OverlayRef so that it can be attached to the DOM when openMenu is called.
    */
   private _createOverlay(): OverlayRef {
-    if (!this._overlayRef) {
+    if (this._overlayRef) {
+      this._overlayRef.getConfig().positionStrategy = this._getPosition();
+    } else {
       this._portal = new TemplatePortal(this.menu.templateRef, this._viewContainerRef);
       const config = this._getOverlayConfig();
       this._subscribeToPositions(config.positionStrategy as ConnectedPositionStrategy);

src/lib/menu/menu.spec.ts

@@ -304,6 +304,26 @@ describe('MatMenu', () => {
       expect(panel.classList).toContain('mat-menu-after');
     });
 
+    it('should update menu position on every open', fakeAsync(() => {
+      debugger;
+
+      const {top: beforeTop, left: beforeLeft} = panel.getBoundingClientRect();
+
+      fixture.componentInstance.trigger.closeMenu();
+      fixture.componentInstance.xPosition = 'after';
+      fixture.componentInstance.yPosition = 'below';
+      fixture.detectChanges();
+      tick(500);
+
+      fixture.componentInstance.trigger.openMenu();
+      fixture.detectChanges();
+
+      const newPanel = overlayContainerElement.querySelector('.mat-menu-panel') as HTMLElement;
+      const {top: afterTop, left: afterLeft} = newPanel.getBoundingClientRect();
+
+      expect(beforeLeft).toBeLessThan(afterLeft);
+      expect(beforeTop).toBeLessThan(afterTop);
+    }));
   });
 
   describe('fallback positions', () => {