diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 303bf557329d..27d69a13d820 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/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); diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 96ceede4320a..603c32ca1761 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -304,6 +304,24 @@ describe('MatMenu', () => { expect(panel.classList).toContain('mat-menu-after'); }); + it('should update menu position on every open', fakeAsync(() => { + 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', () => {