From 6275339f09a31384cfb551606683c4296d5737ff Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sat, 21 Mar 2020 06:06:10 +0100
Subject: [PATCH] fix(form-field): incorrectly calculating start gap in RTL in
 the presence of a prefix (#18867)

The logic that figures out the outline gap in the presence of a prefix was producing a negative width which is invalid. It seems like this has been there since the beginning, but we haven't noticed it, because our dev app doesn't have many examples with a prefix and it always starts off from LTR and we switch it to RTL manually which doesn't have this problem since it already got a valid width while it was in LTR.

Fixes #18857.
---
 src/material/form-field/form-field.ts |  2 +-
 src/material/input/input.spec.ts      | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index 8b18d5d8723d..d644f29aa3cf 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -579,7 +579,7 @@ export class MatFormField extends _MatFormFieldMixinBase
       for (const child of labelEl.children) {
         labelWidth += child.offsetWidth;
       }
-      startWidth = labelStart - containerStart - outlineGapPadding;
+      startWidth = Math.abs(labelStart - containerStart) - outlineGapPadding;
       gapWidth = labelWidth > 0 ? labelWidth * floatingLabelScale + outlineGapPadding * 2 : 0;
     }
 
diff --git a/src/material/input/input.spec.ts b/src/material/input/input.spec.ts
index 23b7030943a5..00a742b8d7ca 100644
--- a/src/material/input/input.spec.ts
+++ b/src/material/input/input.spec.ts
@@ -1346,6 +1346,28 @@ describe('MatInput with appearance', () => {
     expect(parseInt(outlineGap.style.width)).toBeGreaterThan(0);
   }));
 
+  it('should calculate the gap when starting off in RTL', fakeAsync(() => {
+    fixture.destroy();
+    TestBed.resetTestingModule();
+
+    const outlineFixture = createComponent(MatInputWithAppearanceAndLabel, [{
+      provide: Directionality,
+      useValue: {change: new Subject<Direction>(), value: 'rtl'}
+    }]);
+
+    outlineFixture.componentInstance.appearance = 'outline';
+    outlineFixture.detectChanges();
+    flush();
+    outlineFixture.detectChanges();
+
+    const wrapperElement = outlineFixture.nativeElement;
+    const outlineStart = wrapperElement.querySelector('.mat-form-field-outline-start');
+    const outlineGap = wrapperElement.querySelector('.mat-form-field-outline-gap');
+
+    expect(parseInt(outlineStart.style.width)).toBeGreaterThan(0);
+    expect(parseInt(outlineGap.style.width)).toBeGreaterThan(0);
+  }));
+
   it('should not set an outline gap if the label is empty', fakeAsync(() => {
     fixture.destroy();
     TestBed.resetTestingModule();