fix(form-field): incorrectly calculating start gap in RTL in the pres…

…ence 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

@@ -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;
     }
 

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();