diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 82f6c91ddb89..32256ba3232e 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -195,7 +195,9 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { return; } - this._createOverlay().attach(this._portal); + const overlayRef = this._createOverlay(); + overlayRef.setDirection(this.dir); + overlayRef.attach(this._portal); if (this.menu.lazyContent) { this.menu.lazyContent.attach(this.menuData); @@ -344,7 +346,6 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy { positionStrategy: this._getPosition(), hasBackdrop: this.menu.hasBackdrop == null ? !this.triggersSubmenu() : this.menu.hasBackdrop, backdropClass: this.menu.backdropClass || 'cdk-overlay-transparent-backdrop', - direction: this.dir, scrollStrategy: this._scrollStrategy() }); } diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 77c45733b78a..23130170865f 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -245,6 +245,30 @@ describe('MatMenu', () => { expect(overlayPane.getAttribute('dir')).toEqual('rtl'); }); + it('should update the panel direction if the trigger direction changes', () => { + const dirProvider = {value: 'rtl'}; + const fixture = createComponent(SimpleMenu, [{ + provide: Directionality, useFactory: () => dirProvider} + ], [FakeIcon]); + + fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + + let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!; + expect(overlayPane.getAttribute('dir')).toEqual('rtl'); + + fixture.componentInstance.trigger.closeMenu(); + fixture.detectChanges(); + + dirProvider.value = 'ltr'; + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + + overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!; + expect(overlayPane.getAttribute('dir')).toEqual('ltr'); + }); + it('should transfer any custom classes from the host to the overlay', () => { const fixture = createComponent(SimpleMenu, [], [FakeIcon]);