fix(connected-overlay): direction not being updated (#3293)

Fixes #3241.

Author: crisbeto

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<ConnectedOverlayDirectiveTest>;
+  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', () => {

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();