Skip to content

Commit d799c43

Browse files
committed
fix: eliminate loop limit exceeded error
1 parent 44c4f85 commit d799c43

File tree

1 file changed

+13
-1
lines changed

1 file changed

+13
-1
lines changed

src/material/form-field/directives/floating-label.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,23 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
9393
return this._elementRef.nativeElement;
9494
}
9595

96+
private _handleResize() {
97+
// In the case where the label grows in size, the following sequence of events occurs:
98+
// 1. The label grows by 1px triggering the ResizeObserver
99+
// 2. The notch is expanded to accommodate the entire label
100+
// 3. The label expands to its full width, triggering the ResizeObserver again
101+
//
102+
// This is expected, but If we allow this to all happen within the same macro task it causes an
103+
// error: `ResizeObserver loop limit exceeded`. Therefore we push the notch resize out until
104+
// the next macro task.
105+
setTimeout(() => this.resized.emit());
106+
}
107+
96108
private _startResizeObserver() {
97109
if (this._platform.isBrowser) {
98110
this._stopResizeObserver();
99111
this._stopResizeObserver = this._ngZone.runOutsideAngular(() =>
100-
this._resizeObserver.observe(this._elementRef.nativeElement, () => this.resized.emit(), {
112+
this._resizeObserver.observe(this._elementRef.nativeElement, () => this._handleResize(), {
101113
box: 'border-box',
102114
}),
103115
);

0 commit comments

Comments
 (0)