bug(form-field): Label overlaps matPrefix in mat-tab-group on tab change

[asimkaya]

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

When a mat-form-field with appearance="outline" and a matPrefix (e.g., an icon) is placed inside a mat-tab within a mat-tab-group, the mat-label (acting as a placeholder) overlaps with the matPrefix icon after switching tabs.

The issue is typically observed as follows:

• The form field renders correctly on the initially selected tab.
• When switching to a different tab containing a similar form field, the label of that form field incorrectly overlaps the prefix icon.
• Switching back to the first tab might then also show the overlap.

This behavior makes the form field difficult to read and use.

Reproduction

StackBlitz link: Link

Expected Behavior

The mat-label (placeholder) of the mat-form-field should always be positioned correctly to the right of the matPrefix icon, without any overlap, regardless of tab switching. The prefix icon should create sufficient space for itself, and the label should respect this space when not floated.

Actual Behavior

After switching to a tab that was not initially active, the mat-label (placeholder) of the mat-form-field incorrectly overlaps with the matPrefix icon. The label does not seem to account for the space occupied by the prefix. This issue is consistently reproducible with the provided minimal reproduction steps.

Environment

• Angular: 19.0.5
• CDK/Material: 19.0.4
• Browser(s): Google Chrome
• Operating System (e.g. Windows, macOS, Ubuntu):
  Edition Windows Server 2025 Datacenter Evaluation
  Version 24H2
  OS build 26100.2894

[yousafravian]

This is indeed reproducible. Link

version: ^19.2.0

[crisbeto]

I can't reproduce it anymore in v20, but there seems to be a weird transition on the label when it's first shown. https://stackblitz.com/edit/3unxj1xn?file=src%2Fexample%2Finput-overview-example.ts,src%2Fexample%2Finput-overview-example.html

[yousafravian]

I can look into this if no one is working on it

[crisbeto]

I spent a bit of time on it today and it's tricky, because the form field component sets a class that enables its animations 300ms after ngOnInit. In the example above this happens while the form field is off-screen. When it comes back on the screen, animations are already enabled.

I found some hacky ways to disable it like removing the class when the label offset changes and then re-adding it, but I was hesitant to send it out since it can have performance implications.

[Mikebeard77]

I was able to work around this by implementing a custom directive to update the label offset after a resize observer detects the element change -- putting the directive on the form fields' input element.

We use formly, so didn't have direct access to the mat-form-field element.

@Directive({
  selector: '[triggerMatOutlineUpdate]'
})
export class TriggerMatOutlineUpdateDirective implements AfterViewInit {
  private observer: ResizeObserver | null = null;

  constructor(private elementRef: ElementRef, @Optional() private matFormField: MatFormField) {}

  ngAfterViewInit(): void {
    setTimeout(() => {
      const el = this.elementRef?.nativeElement;
      if (el) {
        this.observer = new ResizeObserver(entries => {
          for (let entry of entries) {
            const width = entry.contentRect.width;
            if (width > 0) {
              if (this.matFormField) {
                (this.matFormField as any)._updateOutlineLabelOffset();
              }
              this.observer?.disconnect();
              break;
            }
          }
        });
        this.observer.observe(el);
      }
    });
  }
}