fix(form-field): FormField with outline doesn't work well with dir="r…

src/material/form-field/form-field.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directionality} from '@angular/cdk/bidi';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   AfterContentChecked,
@@ -231,6 +231,15 @@ export class MatFormField extends _MatFormFieldMixinBase
   /** Whether the Angular animations are enabled. */
   _animationsEnabled: boolean;
 
+  /* Holds the previous direction emitted by directionality service change emitter.
+     This is used in updateOutlineGap() method to update the width and position of the gap in the
+     outline. Only relevant for the outline appearance. The direction is getting updated in the
+     UI after directionality service change emission. So the outlines gaps are getting
+     updated in updateOutlineGap() method before connectionContainer child direction change
+     in UI. We may get wrong calculations. So we are storing the previous direction to get the
+     correct outline calculations*/
+  private _previousDirection: Direction = 'ltr';
+
   /**
    * @deprecated
    * @breaking-change 8.0.0
@@ -343,7 +352,10 @@ export class MatFormField extends _MatFormFieldMixinBase
     });
 
     if (this._dir) {
-      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this.updateOutlineGap());
+      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this.updateOutlineGap();
+        this._previousDirection = this._dir.value;
+      });
     }
   }
 
@@ -565,6 +577,6 @@ export class MatFormField extends _MatFormFieldMixinBase
 
   /** Gets the start end of the rect considering the current directionality. */
   private _getStartEnd(rect: ClientRect): number {
-    return this._dir && this._dir.value === 'rtl' ? rect.right : rect.left;
+    return this._previousDirection === 'rtl' ? rect.right : rect.left;
   }
 }

src/material/input/input.spec.ts

@@ -1450,6 +1450,61 @@ describe('MatInput with appearance', () => {
     expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
   }));
 
+  it('should update the outline gap correctly if the direction changes multiple times',
+    fakeAsync(() => {
+      fixture.destroy();
+      TestBed.resetTestingModule();
+
+      let zone: MockNgZone;
+      const fakeDirectionality = {change: new Subject<Direction>(), value: 'ltr'};
+      const outlineFixture = createComponent(MatInputWithAppearanceAndLabel, [
+        {
+          provide: Directionality,
+          useValue: fakeDirectionality
+        },
+        {
+          provide: NgZone,
+          useFactory: () => zone = new MockNgZone()
+        }
+      ]);
+
+      outlineFixture.componentInstance.appearance = 'outline';
+      outlineFixture.detectChanges();
+      zone!.simulateZoneExit();
+      flush();
+      outlineFixture.detectChanges();
+
+      spyOn(outlineFixture.componentInstance.formField, 'updateOutlineGap');
+
+      fakeDirectionality.value = 'rtl';
+      fakeDirectionality.change.next('rtl');
+      outlineFixture.detectChanges();
+      flush();
+      outlineFixture.detectChanges();
+
+      let wrapperElement = outlineFixture.nativeElement;
+      let outlineStart = wrapperElement.querySelector('.mat-form-field-outline-start');
+      // outlineGapPadding 5px + containerRect margin/padding in worst case 3px
+      const maxOutlineStart = '8px';
+
+      expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
+      expect(parseInt(outlineStart.style.width)).toBeLessThan(parseInt(maxOutlineStart));
+
+      fakeDirectionality.value = 'ltr';
+      fakeDirectionality.change.next('ltr');
+      outlineFixture.detectChanges();
+      flush();
+      outlineFixture.detectChanges();
+
+      wrapperElement = outlineFixture.nativeElement;
+      outlineStart = wrapperElement.querySelector('.mat-form-field-outline-start');
+
+      expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
+      expect(parseInt(outlineStart.style.width)).toBeLessThan(parseInt(maxOutlineStart));
+
+    }));
+
+
 
 
 });