fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944

Author: Suresh918

src/cdk/bidi/directionality.ts

@@ -19,24 +19,37 @@ export type Direction = 'ltr' | 'rtl';
  */
 @Injectable({providedIn: 'root'})
 export class Directionality implements OnDestroy {
+  private _document: Document;
   /** The current 'ltr' or 'rtl' value. */
-  readonly value: Direction = 'ltr';
+  value: Direction = 'ltr';
 
   /** Stream that emits whenever the 'ltr' / 'rtl' state changes. */
   readonly change = new EventEmitter<Direction>();
 
   constructor(@Optional() @Inject(DIR_DOCUMENT) _document?: any) {
     if (_document) {
+      this._document = _document;
+      this.setDirection();
+    }
+  }
+
+    /** Get the current direction. */
+    get currentDirection(): Direction {
+      this.setDirection();
+      return this.value;
+    }
+
+    /** Set the current direction. */
+    setDirection(): void {
       // TODO: handle 'auto' value -
       // We still need to account for dir="auto".
       // It looks like HTMLElemenet.dir is also "auto" when that's set to the attribute,
       // 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;
+      const bodyDir = this._document.body ? this._document.body.dir : null;
+      const htmlDir = this._document.documentElement ? this._document.documentElement.dir : null;
       const value = bodyDir || htmlDir;
       this.value = (value === 'ltr' || value === 'rtl') ? value : 'ltr';
     }
-  }
 
   ngOnDestroy() {
     this.change.complete();

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

@@ -558,7 +558,7 @@ 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._dir && this._dir.currentDirection && this._dir.currentDirection === 'rtl' ? rect.right : rect.left;
   }
 
   /**