diff --git a/src/cdk/bidi/dir.ts b/src/cdk/bidi/dir.ts index f5fe1230a839..dbf246361376 100644 --- a/src/cdk/bidi/dir.ts +++ b/src/cdk/bidi/dir.ts @@ -41,9 +41,9 @@ export class Dir implements Directionality, AfterContentInit, OnDestroy { /** @docs-private */ @Input() get dir(): Direction { return this._dir; } - set dir(v: Direction) { + set dir(value: Direction) { const old = this._dir; - this._dir = v; + this._dir = (value === 'ltr' || value === 'rtl') ? value : 'ltr'; if (old !== this._dir && this._isInitialized) { this.change.emit(this._dir); } diff --git a/src/cdk/bidi/directionality.spec.ts b/src/cdk/bidi/directionality.spec.ts index 7451d3247ba9..89414a81859b 100644 --- a/src/cdk/bidi/directionality.spec.ts +++ b/src/cdk/bidi/directionality.spec.ts @@ -1,7 +1,7 @@ import {async, fakeAsync, TestBed} from '@angular/core/testing'; -import {Component} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {BidiModule, Directionality, Direction, DIR_DOCUMENT} from './index'; +import {BidiModule, Directionality, Dir, Direction, DIR_DOCUMENT} from './index'; describe('Directionality', () => { let fakeDocument: FakeDocument; @@ -55,6 +55,15 @@ describe('Directionality', () => { subscription.unsubscribe(); }); + it('should default to ltr if an invalid direction is set on the body', () => { + fakeDocument.body.dir = 'not-valid'; + + const fixture = TestBed.createComponent(InjectsDirectionality); + const testComponent = fixture.debugElement.componentInstance; + + expect(testComponent.dir.value).toBe('ltr'); + }); + }); describe('Dir directive', () => { @@ -103,6 +112,17 @@ describe('Directionality', () => { subscription.unsubscribe(); })); + it('should default to ltr if an invalid value is passed in', () => { + const fixture = TestBed.createComponent(ElementWithDir); + + fixture.detectChanges(); + expect(fixture.componentInstance.dir.value).toBe('rtl'); + + fixture.componentInstance.direction = 'not-valid'; + fixture.detectChanges(); + expect(fixture.componentInstance.dir.value).toBe('ltr'); + }); + }); }); @@ -115,6 +135,7 @@ describe('Directionality', () => { ` }) class ElementWithDir { + @ViewChild(Dir) dir: Dir; direction = 'rtl'; changeCount = 0; } diff --git a/src/cdk/bidi/directionality.ts b/src/cdk/bidi/directionality.ts index 88a5c068d9eb..1c95de0109f8 100644 --- a/src/cdk/bidi/directionality.ts +++ b/src/cdk/bidi/directionality.ts @@ -33,7 +33,8 @@ export class Directionality implements OnDestroy { // but getComputedStyle return either "ltr" or "rtl". avoiding getComputedStyle for now const bodyDir = _document.body ? _document.body.dir : null; const htmlDir = _document.documentElement ? _document.documentElement.dir : null; - this.value = (bodyDir || htmlDir || 'ltr') as Direction; + const value = bodyDir || htmlDir; + this.value = (value === 'ltr' || value === 'rtl') ? value : 'ltr'; } }