fix(autocomplete): support rtl (#2648)

Author: kara

src/lib/autocomplete/autocomplete-trigger.ts

@@ -1,10 +1,13 @@
-import {Directive, ElementRef, Input, ViewContainerRef, OnDestroy} from '@angular/core';
+import {
+  Directive, ElementRef, Input, ViewContainerRef, Optional, OnDestroy
+} from '@angular/core';
 import {Overlay, OverlayRef, OverlayState, TemplatePortal} from '../core';
 import {MdAutocomplete} from './autocomplete';
 import {PositionStrategy} from '../core/overlay/position/position-strategy';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/observable/merge';
+import {Dir} from '../core/rtl/dir';
 
 /** The panel needs a slight y-offset to ensure the input underline displays. */
 export const MD_AUTOCOMPLETE_PANEL_OFFSET = 6;
@@ -27,7 +30,7 @@ export class MdAutocompleteTrigger implements OnDestroy {
   @Input('mdAutocomplete') autocomplete: MdAutocomplete;
 
   constructor(private _element: ElementRef, private _overlay: Overlay,
-              private _viewContainerRef: ViewContainerRef) {}
+              private _viewContainerRef: ViewContainerRef, @Optional() private _dir: Dir) {}
 
   ngOnDestroy() { this._destroyPanel(); }
 
@@ -95,6 +98,7 @@ export class MdAutocompleteTrigger implements OnDestroy {
     overlayState.width = this._getHostWidth();
     overlayState.hasBackdrop = true;
     overlayState.backdropClass = 'md-overlay-transparent-backdrop';
+    overlayState.direction = this._dir ? this._dir.value : 'ltr';
     return overlayState;
   }
 

src/lib/autocomplete/autocomplete.spec.ts

@@ -4,11 +4,14 @@ import {By} from '@angular/platform-browser';
 import {MdAutocompleteModule, MdAutocompleteTrigger} from './index';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 import {MdInputModule} from '../input/index';
+import {Dir, LayoutDirection} from '../core/rtl/dir';
 
 describe('MdAutocomplete', () => {
   let overlayContainerElement: HTMLElement;
+  let dir: LayoutDirection;
 
   beforeEach(async(() => {
+    dir = 'ltr';
     TestBed.configureTestingModule({
       imports: [MdAutocompleteModule.forRoot(), MdInputModule.forRoot()],
       declarations: [SimpleAutocomplete],
@@ -23,6 +26,9 @@ describe('MdAutocomplete', () => {
 
           return {getContainerElement: () => overlayContainerElement};
         }},
+        {provide: Dir, useFactory: () => {
+          return {value: dir};
+        }},
       ]
     });
 
@@ -135,6 +141,19 @@ describe('MdAutocomplete', () => {
 
   });
 
+  it('should have the correct text direction in RTL', () => {
+    dir = 'rtl';
+
+    const fixture = TestBed.createComponent(SimpleAutocomplete);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.openPanel();
+    fixture.detectChanges();
+
+    const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
+    expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+  });
+
 });
 
 @Component({