File tree Expand file tree Collapse file tree 1 file changed +13
-1
lines changed
src/material/form-field/directives Expand file tree Collapse file tree 1 file changed +13
-1
lines changed Original file line number Diff line number Diff line change @@ -93,11 +93,23 @@ export class MatFormFieldFloatingLabel implements OnDestroy {
93
93
return this . _elementRef . nativeElement ;
94
94
}
95
95
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
+
96
108
private _startResizeObserver ( ) {
97
109
if ( this . _platform . isBrowser ) {
98
110
this . _stopResizeObserver ( ) ;
99
111
this . _stopResizeObserver = this . _ngZone . runOutsideAngular ( ( ) =>
100
- this . _resizeObserver . observe ( this . _elementRef . nativeElement , ( ) => this . resized . emit ( ) , {
112
+ this . _resizeObserver . observe ( this . _elementRef . nativeElement , ( ) => this . _handleResize ( ) , {
101
113
box : 'border-box' ,
102
114
} ) ,
103
115
) ;
You can’t perform that action at this time.
0 commit comments