From 10743fb3e2b3931bd1d70eb63dc7bd30d4bc91fa Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 27 Jul 2018 00:07:48 +0200 Subject: [PATCH] fix(bidi): default invalid directionality values to ltr Fixes invalid directionality values being accepted as they are, rather than defaulting to ltr. Browsers fall back to ltr anyway, however having an invalid value can break some of our component that could be checking for one of the correct values explicitly. --- src/cdk/bidi/dir.ts | 4 ++-- src/cdk/bidi/directionality.spec.ts | 25 +++++++++++++++++++++++-- src/cdk/bidi/directionality.ts | 3 ++- 3 files changed, 27 insertions(+), 5 deletions(-) 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'; } }