fix(material/form-field): hiding a label after it has been shown leaves a blank space

src/dev-app/input/input-demo.html

@@ -880,6 +880,41 @@ <h4>Custom control</h4>
   </mat-card-content>
 </mat-card>
 
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Without label</mat-toolbar>
+  <mat-card-content>
+    <h4>Label removed</h4>
+    <p>
+    <mat-form-field appearance="outline">
+      @if (hasLabel$ | async){
+        <mat-label>My input</mat-label>
+      }
+      <input matInput type="text" />
+    </mat-form-field>
+    </p>
+    <p>
+    <mat-form-field>
+      @if (hasLabel$ | async){
+        <mat-label>My input</mat-label>
+      }
+      <input matInput type="text" />
+    </mat-form-field>
+    </p>
+    <h4>No defined label</h4>
+    <p>
+    <mat-form-field appearance="outline">
+      <input matInput type="text"/>
+    </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field>
+        <input matInput type="text"/>
+      </mat-form-field>
+    </p>
+  </mat-card-content>
+</mat-card>
+
+
 <mat-card class="demo-card demo-basic">
   <mat-card-content>
     <button (click)="showHidden = !showHidden">Show/hide hidden form-field</button>

src/dev-app/input/input-demo.ts

@@ -29,6 +29,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {BehaviorSubject} from 'rxjs';
 
 let max = 5;
 
@@ -100,8 +101,13 @@ export class InputDemo {
   fillAppearance: string;
   outlineAppearance: string;
 
+  hasLabel$ = new BehaviorSubject(true);
+
   constructor() {
-    setTimeout(() => this.delayedFormControl.setValue('hello'), 100);
+    setTimeout(() => {
+      this.delayedFormControl.setValue('hello');
+      this.hasLabel$.next(false);
+    }, 100);
   }
 
   addABunch(n: number) {

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

@@ -555,7 +555,10 @@ export class MatFormField
 
   _hasFloatingLabel = computed(() => !!this._labelChild());
 
-  _shouldLabelFloat() {
+  _shouldLabelFloat(): boolean {
+    if (!this._hasFloatingLabel()) {
+      return false;
+    }
     return this._control.shouldLabelFloat || this._shouldAlwaysFloat();
   }
 

src/material/input/input.spec.ts

@@ -157,7 +157,8 @@ describe('MatMdcInput without forms', () => {
     fixture.detectChanges();
 
     expect(formField._control.empty).toBe(false);
-    expect(formField._shouldLabelFloat()).toBe(true);
+    // should not float label if there is no label
+    expect(formField._shouldLabelFloat()).toBe(false);
   }));
 
   it('should not be empty when the value set before view init', fakeAsync(() => {
@@ -1531,6 +1532,62 @@ describe('MatFormField default options', () => {
     ).toBe(true);
   });
 });
+describe('MatFormField without label', () => {
+  it('should not float the label when no label is defined.', () => {
+    let fixture = createComponent(MatInputWithoutDefinedLabel);
+    fixture.detectChanges();
+
+    const inputEl = fixture.debugElement.query(By.css('input'))!;
+    const formField = fixture.debugElement.query(By.directive(MatFormField))!
+      .componentInstance as MatFormField;
+
+    // Update the value of the input and set focus.
+    inputEl.nativeElement.value = 'Text';
+    fixture.detectChanges();
+
+    // should not float label if there is no label
+    expect(formField._shouldLabelFloat()).toBe(false);
+  });
+
+  it('should not float the label when the label is removed after it has been shown', () => {
+    let fixture = createComponent(MatInputWithCondictionalLabel);
+    fixture.detectChanges();
+    const inputEl = fixture.debugElement.query(By.css('input'))!;
+    const formField = fixture.debugElement.query(By.directive(MatFormField))!
+      .componentInstance as MatFormField;
+
+    // initially, label is present
+    expect(fixture.nativeElement.querySelector('label')).not.toBeNull();
+
+    // removing label after it has been shown
+    fixture.componentInstance.hasLabel = false;
+    inputEl.nativeElement.value = 'Text';
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+
+    // now expected to not have a label
+    expect(fixture.nativeElement.querySelector('label')).toBeNull();
+    // should not float label since there is no label
+    expect(formField._shouldLabelFloat()).toBe(false);
+  });
+
+  it('should float the label when the label is not removed', () => {
+    let fixture = createComponent(MatInputWithCondictionalLabel);
+    fixture.detectChanges();
+    const inputEl = fixture.debugElement.query(By.css('input'))!;
+    const formField = fixture.debugElement.query(By.directive(MatFormField))!
+      .componentInstance as MatFormField;
+
+    inputEl.nativeElement.value = 'Text';
+    fixture.changeDetectorRef.markForCheck();
+    fixture.detectChanges();
+
+    // Expected to have a label
+    expect(fixture.nativeElement.querySelector('label')).not.toBeNull();
+    // should float label since there is a label
+    expect(formField._shouldLabelFloat()).toBe(true);
+  });
+});
 
 function configureTestingModule(
   component: Type<any>,
@@ -1787,6 +1844,28 @@ class MatInputWithDynamicLabel {
   shouldFloat: 'always' | 'auto' = 'always';
 }
 
+@Component({
+  template: `
+    <mat-form-field>
+      <input matInput placeholder="Label">
+    </mat-form-field>
+  `,
+})
+class MatInputWithoutDefinedLabel {}
+
+@Component({
+  template: `
+    <mat-form-field>
+      @if (hasLabel) {
+        <mat-label>Label</mat-label>
+      }
+      <input matInput>
+    </mat-form-field>`,
+})
+class MatInputWithCondictionalLabel {
+  hasLabel = true;
+}
+
 @Component({
   template: `
     <mat-form-field>