fix(form-field): outline gap not being recalculated on direction changes

Since some of the calculations for the outline gap depend on the direction, we need to re-run them of the direction changes.

Author: crisbeto

src/lib/chips/chip-input.spec.ts

@@ -7,6 +7,7 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {EMPTY} from 'rxjs';
 import {MatChipInput, MatChipInputEvent} from './chip-input';
 import {MatChipsModule} from './index';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
@@ -27,7 +28,7 @@ describe('MatChipInput', () => {
       declarations: [TestChipInput],
       providers: [{
         provide: Directionality, useFactory: () => {
-          return {value: dir.toLowerCase()};
+          return {value: dir.toLowerCase(), change: EMPTY};
         }
       }]
     });

src/lib/form-field/form-field.ts

@@ -26,6 +26,7 @@ import {
   QueryList,
   ViewChild,
   ViewEncapsulation,
+  OnDestroy,
 } from '@angular/core';
 import {
   CanColor, CanColorCtor,
@@ -34,8 +35,8 @@ import {
   MAT_LABEL_GLOBAL_OPTIONS,
   mixinColor,
 } from '@angular/material/core';
-import {fromEvent, merge} from 'rxjs';
-import {startWith, take} from 'rxjs/operators';
+import {fromEvent, merge, Subject} from 'rxjs';
+import {startWith, take, takeUntil} from 'rxjs/operators';
 import {MatError} from './error';
 import {matFormFieldAnimations} from './form-field-animations';
 import {MatFormFieldControl} from './form-field-control';
@@ -141,9 +142,10 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
 })
 
 export class MatFormField extends _MatFormFieldMixinBase
-    implements AfterContentInit, AfterContentChecked, AfterViewInit, CanColor {
+    implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy, CanColor {
   private _labelOptions: LabelOptions;
   private _outlineGapCalculationNeeded = false;
+  private _destroyed = new Subject<void>();
 
   /** The form-field appearance style. */
   @Input()
@@ -303,6 +305,10 @@ export class MatFormField extends _MatFormFieldMixinBase
       this._syncDescribedByIds();
       this._changeDetectorRef.markForCheck();
     });
+
+    if (this._dir) {
+      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this.updateOutlineGap());
+    }
   }
 
   ngAfterContentChecked() {
@@ -318,6 +324,11 @@ export class MatFormField extends _MatFormFieldMixinBase
     this._changeDetectorRef.detectChanges();
   }
 
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+
   /** Determines whether a class from the NgControl should be forwarded to the host element. */
   _shouldForward(prop: keyof NgControl): boolean {
     const ngControl = this._control ? this._control.ngControl : null;

src/lib/input/input.spec.ts

@@ -43,6 +43,8 @@ import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatStepperModule} from '@angular/material/stepper';
 import {MatTabsModule} from '@angular/material/tabs';
+import {Directionality, Direction} from '@angular/cdk/bidi';
+import {Subject} from 'rxjs';
 import {MatInputModule, MatInput, MAT_INPUT_VALUE_ACCESSOR} from './index';
 import {MatTextareaAutosize} from './autosize';
 
@@ -1340,6 +1342,33 @@ describe('MatInput with appearance', () => {
     expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
   }));
 
+  it('should update the outline gap if the direction changes', fakeAsync(() => {
+    fixture.destroy();
+    TestBed.resetTestingModule();
+
+    const fakeDirectionality = {change: new Subject<Direction>(), value: 'ltr'};
+    const outlineFixture = createComponent(MatInputWithAppearanceAndLabel, [{
+      provide: Directionality,
+      useValue: fakeDirectionality
+    }]);
+
+    outlineFixture.componentInstance.appearance = 'outline';
+    outlineFixture.detectChanges();
+    flush();
+    outlineFixture.detectChanges();
+
+    spyOn(outlineFixture.componentInstance.formField, 'updateOutlineGap');
+
+    fakeDirectionality.value = 'rtl';
+    fakeDirectionality.change.next('rtl');
+    outlineFixture.detectChanges();
+    flush();
+    outlineFixture.detectChanges();
+
+    expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
+  }));
+
+
 
 });