fix(bidi): default invalid directionality values to ltr (#12396)

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.

Author: crisbeto

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

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;
 }

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';
     }
   }