bug(form-field): Extra space in Outline MatFormField Notch when label content is empty

[kjteh]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Extra space in Outline MatFormField Notch when the width of the label is 0.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-otgsx4ue?file=src%2Fmain.ts

Expected Behavior

The extra space (padding-right: 8px) SHOULD BE REMOVED if the label content is empty, when

• floatLabel = always OR
• floatLabel = auto AND there is value filled in to the form field.

The padding-right is being set by following css class:
.mdc-notched-outline--notched .mdc-notched-outline__notch

Actual Behavior

The extra space (padding-right: 8px) is VISIBLE despite the label content is empty, when

• floatLabel = always OR
• floatLabel = auto AND there is value filled in to the form field.

Environment

Angular CLI: 19.2.2
Node: 18.20.4
Package Manager: yarn 4.4.1
OS: win32 x64

Angular: 19.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1902.2
@angular-devkit/build-angular 19.2.2
@angular-devkit/core 19.2.2
@angular-devkit/schematics 19.2.2
@angular/cdk 19.2.3
@angular/material 19.2.3
@schematics/angular 19.2.2
ng-packagr 19.2.0
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

[crisbeto]

While I agree that it's a bug, I don't think we should fix it because:

1. There will be a performance cost to it, because we would have to check the label's text on each change detection.
2. For accessibility you should have a label for your inputs.
3. It's fairly straightforward to add @if (text) {<mat-label>{{text}}</mat-label>} at the usage site.

[kjteh]

Thanks for your clarification. Please check through my reasoning below.

1. Could we simply just remove the padding space?

  // MatFormFieldNotchedOutline
  _setNotchWidth(labelWidth: number) {
    const notch = this._notch.nativeElement;

    if (!this.open || !labelWidth) {
      notch.style.width = '';
      notch.style.paddingRight = '0px';  // <------------------ Remove padding-right: 8px that produce the space
    } else {
      ...
    }
  }

2. Yes, it will have. The reason why the mat-label is empty is because Im creating a custom component that wraps the mat-form-field. The custom component can be configured (using input - labelAboveField) to control whether we want to display the label on top of the field or remains the default behavior. However, this implementation will cause the space issue.

<div style="display: flex; flex-direction: column;">
  @if(labelAboveField()) {
  <mat-label style="padding: 4px 16px;">Some Label</mat-label>
  }
  <mat-form-field>
    <mat-label>  <!-- The will produce the extra space -->
      @if(!labelAboveField()) {         Some Label       }
    </mat-label> 
    <mat-select></mat-select>
  </mat-form-field>

</div>

3. If I using this approach, my code will be as following:

<div style="display: flex; flex-direction: column;">
  @if(labelAboveField()) {
  <mat-label style="padding: 4px 16px;">Some Label</mat-label>
  }
  <mat-form-field>
    @if(!labelAboveField()) {
    <mat-label>Some Label</mat-label> <!-- The will cause the mat-label not being displayed, due to display:none is being set -->
     }
    <mat-select></mat-select>
  </mat-form-field>

</div>

This will cause the label will not be rendered if [labelAboveField]="true" by default. The labelAboveField value might be changed in runtime. I suspect this is due to the MatFormFieldNotchedOutline.ngAfterViewInit() will only run once. If it cannot find any mat-label, it will be assigned with mdc-notched-outline--no-label which will set display:none to the element forever.

[kjteh]

appreciated, thank you for your time.