bug(mat-form-field): Label for outline mat-form-field is overlapping matPrefix icon in a mat-sidenav

[lcecil]

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

I noticed that the transform property on the <label> for a mat-form-field with appearance="outline" isn't correctly picking up the width of the icon, if the form field has a matPrefix. This is specific to when the form field is within a mat-sidenav (perhaps other components that aren't visible on component init, but I haven't tried).

See attached images of the DOM elements and place in the code where this is calculated, plus attached blitz which shows the correct behavior for a mat-form-field with appearance="fill"

Reproduction

StackBlitz link: https://stackblitz.com/edit/i6aa9z
Steps to reproduce:

1. Add a mat-form-field with a matPrefix and appearance="outline" to a mat-sidenav
2. Toggle the mat-sidenav open

Expected Behavior

Label should be shifted to the left so that it does not overlap the icon

Actual Behavior

Label is overlapping the prefix icon

Environment

• Angular: 17.0.0
• CDK/Material: 17.0.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS, Windows

[Mikebeard77]

Is there a workaround for this?

I'm having a headache with this issue in version 16.2.14

[slak44]

I can reproduce this with the latest material, 19.2.1. Also, this used to work in material 14, so it's technically a regression 😅

The cause is probably here:

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

Lines 741 to 754 in fc46997

	const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
	const textPrefixContainer = this._textPrefixContainer?.nativeElement;
	const iconSuffixContainer = this._iconSuffixContainer?.nativeElement;
	const textSuffixContainer = this._textSuffixContainer?.nativeElement;
	const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;
	const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
	const iconSuffixContainerWidth = iconSuffixContainer?.getBoundingClientRect().width ?? 0;
	const textSuffixContainerWidth = textSuffixContainer?.getBoundingClientRect().width ?? 0;
	// If the directionality is RTL, the x-axis transform needs to be inverted. This
	// is because `transformX` does not change based on the page directionality.
	const negate = this._dir.value === 'rtl' ? '-1' : '1';
	const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
	const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
	const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;

Material takes the icon prefix width with getBoundingClientRect, but that will never work when the form field is hidden or not yet in the DOM. I hit this with form fields inside tabs (works in the first tab... bug appears in tabs 2-N).

There is also a comment from @mmalerba that mentions how ResizeObserver is needed for "dynamic prefixes", but I think this bug makes it required for static icon prefixes too, when they're inside sidenav/tabs/etc:

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

Lines 558 to 561 in fc46997

	private _initializeOutlineLabelOffsetSubscriptions() {
	// Whenever the prefix changes, schedule an update of the label offset.
	// TODO(mmalerba): Use ResizeObserver to better support dynamically changing prefix content.
	this._prefixChildren.changes.subscribe(() => (this._needsOutlineLabelOffsetUpdate = true));

---

For anyone who needs a workaround, you can manually set the transform. It depends on the width of the icon prefix container. In my case, the width was 36px, --mat-mdc-form-field-label-offset-x was -16px, so 20px:

.mat-mdc-form-field.icon-prefix-workaround {
  --mat-mdc-form-field-label-transform: translateY(-50%) translateX(20px);
}

A similar workaround should work for suffixes, probably.

[Mikebeard77]

Yeah, part of my problem is my prefixes are dynamic in width, so a set width won't work for me. Unfortunate.

[Hapanmuffinssi]

Just fixed one such issue by detecting the parent (with ViewChild decorator) of the element having the prefix and setting resizeobserver for the parent. When the parent element got a width value greater than zero, I allowed displaying the child element with the prefix with *ngIf + signal and disconnected the observer. Now the prefix displays correctly in this case and the solution does not consume extra calculation resources after the first detection.

The issue originated from hiding the main content of a component with a directive tracking sidenav readiness status and then displaying the content later after the sidenav had finished it's opening animation. And, as mentioned before, tabs may also cause such issues.

Angular Material in use: 19.2.9