diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index dfe1967149ab..a7396e6bc9d7 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/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; } diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index e7db384a3fbf..9b4b6e40b7cb 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/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({