fix(material/form-field): outline gap not recalculated when switching to empty label

scripts/check-mdc-tests-config.ts

@@ -75,6 +75,7 @@ export const config = {
       'should update the outline gap if the direction changes',
       'should update the outline gap correctly if the direction changes multiple times',
       'should calculate the outline gaps inside the shadow DOM',
+      'should recalculate the outline gap when the label changes to empty after init',
       'should be legacy appearance if no default options provided',
       'should be legacy appearance if empty default options provided',
     ],

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

@@ -549,20 +549,26 @@ export class MatFormField
    */
   updateOutlineGap() {
     const labelEl = this._label ? this._label.nativeElement : null;
+    const container = this._connectionContainerRef.nativeElement;
+    const outlineStartSelector = '.mat-form-field-outline-start';
+    const outlineGapSelector = '.mat-form-field-outline-gap';
 
-    if (
-      this.appearance !== 'outline' ||
-      !labelEl ||
-      !labelEl.children.length ||
-      !labelEl.textContent!.trim()
-    ) {
+    // getBoundingClientRect isn't available on the server.
+    if (this.appearance !== 'outline' || !this._platform.isBrowser) {
       return;
     }
 
-    if (!this._platform.isBrowser) {
-      // getBoundingClientRect isn't available on the server.
+    // If there is no content, set the gap elements to zero.
+    if (!labelEl || !labelEl.children.length || !labelEl.textContent!.trim()) {
+      const gapElements = container.querySelectorAll(
+        `${outlineStartSelector}, ${outlineGapSelector}`,
+      );
+      for (let i = 0; i < gapElements.length; i++) {
+        gapElements[i].style.width = '0';
+      }
       return;
     }
+
     // If the element is not present in the DOM, the outline gap will need to be calculated
     // the next time it is checked and in the DOM.
     if (!this._isAttachedToDOM()) {
@@ -573,9 +579,8 @@ export class MatFormField
     let startWidth = 0;
     let gapWidth = 0;
 
-    const container = this._connectionContainerRef.nativeElement;
-    const startEls = container.querySelectorAll('.mat-form-field-outline-start');
-    const gapEls = container.querySelectorAll('.mat-form-field-outline-gap');
+    const startEls = container.querySelectorAll(outlineStartSelector);
+    const gapEls = container.querySelectorAll(outlineGapSelector);
 
     if (this._label && this._label.nativeElement.children.length) {
       const containerRect = container.getBoundingClientRect();

src/material/input/input.spec.ts

@@ -1761,6 +1761,34 @@ describe('MatInput with appearance', () => {
     expect(parseInt(outlineStart.style.width || '0')).toBeGreaterThan(0);
     expect(parseInt(outlineGap.style.width || '0')).toBeGreaterThan(0);
   }));
+
+  it('should recalculate the outline gap when the label changes to empty after init', fakeAsync(() => {
+    fixture.destroy();
+    TestBed.resetTestingModule();
+
+    const outlineFixture = createComponent(MatInputWithAppearanceAndLabel);
+
+    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);
+
+    outlineFixture.componentInstance.labelContent = '';
+    outlineFixture.detectChanges();
+
+    outlineFixture.componentInstance.formField.updateOutlineGap();
+    outlineFixture.detectChanges();
+
+    expect(parseInt(outlineStart.style.width)).toBe(0);
+    expect(parseInt(outlineGap.style.width)).toBe(0);
+  }));
 });
 
 describe('MatFormField default options', () => {