Commit 96117bc

authored

fix(material/form-field): resolve memory leak (#31643)

Inside the form field we have a `afterRenderEffect` that updates the label offset when in outlined mode. The logic for calculating the label offset depends on reading `Directionality.valueSignal` which ends up triggering a memory leak in the framework (angular/angular#62980). These changes add a temporary workaround that removes the `valueSignal` from the signal graph in order to avoid the leak until it's fixed on the framework side.

1 parent 11f9228 commit 96117bcCopy full SHA for 96117bc

File tree

1 file changed

-4

lines changed

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

1 file changed

-4

lines changed

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

Lines changed: 9 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`* found in the LICENSE file at https://angular.dev/license`
`7`	`7`	`*/`
`8`	`8`	`import {_IdGenerator} from '@angular/cdk/a11y';`
`9`		`-import {Directionality} from '@angular/cdk/bidi';`
	`9`	`+import {Direction,Directionality} from '@angular/cdk/bidi';`
`10`	`10`	`import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';`
`11`	`11`	`import {Platform} from '@angular/cdk/platform';`
`12`	`12`	`import {NgTemplateOutlet} from '@angular/common';`
`@@ -30,6 +30,7 @@ import {`
`30`	`30`	`afterRenderEffect,`
`31`	`31`	`computed,`
`32`	`32`	`contentChild,`
	`33`	`+ effect,`
`33`	`34`	`inject,`
`34`	`35`	`signal,`
`35`	`36`	`viewChild,`
`@@ -190,13 +191,13 @@ export class MatFormField`
`190`	`191`	`{`
`191`	`192`	`_elementRef = inject(ElementRef);`
`192`	`193`	`private _changeDetectorRef = inject(ChangeDetectorRef);`
`193`		`- private _dir = inject(Directionality);`
`194`	`194`	`private _platform = inject(Platform);`
`195`	`195`	`private _idGenerator = inject(_IdGenerator);`
`196`	`196`	`private _ngZone = inject(NgZone);`
`197`	`197`	`private _defaults = inject<MatFormFieldDefaultOptions>(MAT_FORM_FIELD_DEFAULT_OPTIONS, {`
`198`	`198`	`optional: true,`
`199`	`199`	`});`
	`200`	`+ private _currentDirection: Direction;`
`200`	`201`
`201`	`202`	`@ViewChild('textField') _textField: ElementRef<HTMLElement>;`
`202`	`203`	`@ViewChild('iconPrefixContainer') _iconPrefixContainer: ElementRef<HTMLElement>;`
`@@ -346,6 +347,7 @@ export class MatFormField`
`346`	`347`
`347`	`348`	`constructor() {`
`348`	`349`	`const defaults = this._defaults;`
	`350`	`+ const dir = inject(Directionality);`
`349`	`351`
`350`	`352`	`if (defaults) {`
`351`	`353`	`if (defaults.appearance) {`
`@@ -357,6 +359,10 @@ export class MatFormField`
`357`	`359`	`}`
`358`	`360`	`}`
`359`	`361`
	`362`	+ // We need this value inside a `afterRenderEffect`, however at the time of writing, reading the
	`363`	`+ // signal directly causes a memory leak (see https://github.com/angular/angular/issues/62980).`
	`364`	`+ // TODO(crisbeto): clean this up once the framework issue is resolved.`
	`365`	`+ effect(() => (this._currentDirection = dir.valueSignal()));`
`360`	`366`	`this._syncOutlineLabelOffset();`
`361`	`367`	`}`
`362`	`368`
`@@ -752,7 +758,6 @@ export class MatFormField`
`752`	`758`	`* incorporate the horizontal offset into their default text-field styles.`
`753`	`759`	`*/`
`754`	`760`	`private _getOutlinedLabelOffset(): OutlinedLabelStyles {`
`755`		`- const dir = this._dir.valueSignal();`
`756`	`761`	`if (!this._hasOutline() \|\| !this._floatingLabel) {`
`757`	`762`	`return null;`
`758`	`763`	`}`
`@@ -776,7 +781,7 @@ export class MatFormField`
`776`	`781`	`const textSuffixContainerWidth = textSuffixContainer?.getBoundingClientRect().width ?? 0;`
`777`	`782`	`// If the directionality is RTL, the x-axis transform needs to be inverted. This`
`778`	`783`	// is because `transformX` does not change based on the page directionality.
`779`		`- const negate = dir === 'rtl' ? '-1' : '1';`
	`784`	`+ const negate = this._currentDirection === 'rtl' ? '-1' : '1';`
`780`	`785`	const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
`781`	`786`	const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
`782`	`787`	const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 96117bc

File tree

1 file changed

1 file changed

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

0 commit comments