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