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

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/autocomplete/autocomplete.spec.ts

@@ -36,7 +36,7 @@ import {MatOption, MatOptionSelectionChange} from '@angular/material/core';
 import {MatFormField, MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Observable, Subject, Subscription} from 'rxjs';
+import {Observable, Subject, Subscription, EMPTY} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {MatInputModule} from '../input/index';
 import {
@@ -485,7 +485,7 @@ describe('MatAutocomplete', () => {
 
   it('should have the correct text direction in RTL', () => {
     const rtlFixture = createComponent(SimpleAutocomplete, [
-      {provide: Directionality, useFactory: () => ({value: 'rtl'})},
+      {provide: Directionality, useFactory: () => ({value: 'rtl', change: EMPTY})},
     ]);
 
     rtlFixture.detectChanges();
@@ -498,7 +498,7 @@ describe('MatAutocomplete', () => {
   });
 
   it('should update the panel direction if it changes for the trigger', () => {
-    const dirProvider = {value: 'rtl'};
+    const dirProvider = {value: 'rtl', change: EMPTY};
     const rtlFixture = createComponent(SimpleAutocomplete, [
       {provide: Directionality, useFactory: () => dirProvider},
     ]);

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

@@ -153,6 +153,7 @@ export class MatFormField extends _MatFormFieldMixinBase
 
   /** Whether the outline gap needs to be calculated next time the zone has stabilized. */
   private _outlineGapCalculationNeededOnStable = false;
+
   private _destroyed = new Subject<void>();
 
   /** The form-field appearance style. */
@@ -325,6 +326,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() {

src/lib/input/BUILD.bazel

@@ -35,6 +35,7 @@ ng_test_library(
     "@angular//packages/forms",
     "@angular//packages/platform-browser",
     "@angular//packages/platform-browser/animations",
+    "//src/cdk/bidi",
     "//src/cdk/platform",
     "//src/cdk/testing",
     "//src/lib/core",

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';
 
@@ -1391,6 +1393,34 @@ describe('MatInput with appearance', () => {
     expect(parseInt(outlineGap.style.width)).toBeGreaterThan(0);
   }));
 
+  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();
+  }));
+
+
+
 });
 
 describe('MatFormField default options', () => {

src/lib/select/select.spec.ts

@@ -59,7 +59,7 @@ import {
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {Subject, Subscription} from 'rxjs';
+import {Subject, Subscription, EMPTY, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {MatSelectModule} from './index';
 import {MatSelect} from './select';
@@ -76,7 +76,7 @@ const LETTER_KEY_DEBOUNCE_INTERVAL = 200;
 describe('MatSelect', () => {
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
-  let dir: {value: 'ltr'|'rtl'};
+  let dir: {value: 'ltr'|'rtl', change: Observable<string>};
   let scrolledSubject = new Subject();
   let viewportRuler: ViewportRuler;
   let platform: Platform;
@@ -98,7 +98,7 @@ describe('MatSelect', () => {
       ],
       declarations: declarations,
       providers: [
-        {provide: Directionality, useFactory: () => dir = {value: 'ltr'}},
+        {provide: Directionality, useFactory: () => dir = {value: 'ltr', change: EMPTY}},
         {
           provide: ScrollDispatcher, useFactory: () => ({
             scrolled: () => scrolledSubject.asObservable(),