diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts index 2043e28df64c..26368a112a7b 100644 --- a/src/lib/core/overlay/overlay-directives.spec.ts +++ b/src/lib/core/overlay/overlay-directives.spec.ts @@ -5,11 +5,13 @@ import {ConnectedOverlayDirective, OverlayModule} from './overlay-directives'; import {OverlayContainer} from './overlay-container'; import {ConnectedPositionStrategy} from './position/connected-position-strategy'; import {ConnectedOverlayPositionChange} from './position/connected-position'; +import {Dir} from '../rtl/dir'; describe('Overlay directives', () => { let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; + let dir: {value: string}; beforeEach(() => { TestBed.configureTestingModule({ @@ -19,6 +21,9 @@ describe('Overlay directives', () => { {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); return {getContainerElement: () => overlayContainerElement}; + }}, + {provide: Dir, useFactory: () => { + return dir = { value: 'ltr' }; }} ], }); @@ -76,6 +81,23 @@ describe('Overlay directives', () => { expect(positions.length).toBeGreaterThan(0); }); + it('should set and update the `dir` attribute', () => { + dir.value = 'rtl'; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(getPaneElement().getAttribute('dir')).toBe('rtl'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + dir.value = 'ltr'; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(getPaneElement().getAttribute('dir')).toBe('ltr'); + }); + describe('inputs', () => { it('should set the width', () => { diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts index 5f3232e14f26..e643256c11cf 100644 --- a/src/lib/core/overlay/overlay-directives.ts +++ b/src/lib/core/overlay/overlay-directives.ts @@ -210,8 +210,6 @@ export class ConnectedOverlayDirective implements OnDestroy { this._position = this._createPositionStrategy() as ConnectedPositionStrategy; overlayConfig.positionStrategy = this._position; - overlayConfig.direction = this.dir; - return overlayConfig; } @@ -223,7 +221,6 @@ export class ConnectedOverlayDirective implements OnDestroy { const strategy = this._overlay.position() .connectedTo(this.origin.elementRef, originPoint, overlayPoint) - .withDirection(this.dir) .withOffsetX(this.offsetX) .withOffsetY(this.offsetY); @@ -250,6 +247,9 @@ export class ConnectedOverlayDirective implements OnDestroy { this._createOverlay(); } + this._position.withDirection(this.dir); + this._overlayRef.getState().direction = this.dir; + if (!this._overlayRef.hasAttached()) { this._overlayRef.attach(this._templatePortal); this.attach.emit();