Skip to content

Commit 6a5afc9

Browse files
committed
fix: don't respond to resize on fill form-fields
1 parent f90b03b commit 6a5afc9

File tree

2 files changed

+28
-11
lines changed

2 files changed

+28
-11
lines changed

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

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
*/
88

99
import {
10-
AfterViewInit,
1110
Directive,
1211
ElementRef,
1312
EventEmitter,
@@ -39,18 +38,34 @@ import {SharedResizeObserver} from '../resize-observer';
3938
'[class.mdc-floating-label--float-above]': 'floating',
4039
},
4140
})
42-
export class MatFormFieldFloatingLabel implements AfterViewInit, OnDestroy {
41+
export class MatFormFieldFloatingLabel implements OnDestroy {
4342
/** Whether the label is floating. */
4443
@Input()
4544
get floating() {
4645
return this._floating;
4746
}
4847
set floating(value: boolean) {
4948
this._floating = value;
50-
this.resized.emit();
49+
if (this.monitorResize) {
50+
this.resized.emit();
51+
}
5152
}
5253
private _floating = false;
5354

55+
@Input()
56+
get monitorResize() {
57+
return this._monitorResize;
58+
}
59+
set monitorResize(value: boolean) {
60+
this._monitorResize = value;
61+
if (this._monitorResize) {
62+
this._startResizeObserver();
63+
} else {
64+
this._stopResizeObserver();
65+
}
66+
}
67+
private _monitorResize = false;
68+
5469
@Output() resized = new EventEmitter<void>();
5570

5671
private _ngZone = inject(NgZone);
@@ -61,14 +76,6 @@ export class MatFormFieldFloatingLabel implements AfterViewInit, OnDestroy {
6176

6277
constructor(private _elementRef: ElementRef<HTMLElement>) {}
6378

64-
ngAfterViewInit() {
65-
this._stopResizeObserver = this._ngZone.runOutsideAngular(() =>
66-
this._resizeObserver.observe(this._elementRef.nativeElement, () => this.resized.emit(), {
67-
box: 'border-box',
68-
}),
69-
);
70-
}
71-
7279
ngOnDestroy() {
7380
this._stopResizeObserver();
7481
}
@@ -82,6 +89,15 @@ export class MatFormFieldFloatingLabel implements AfterViewInit, OnDestroy {
8289
get element(): HTMLElement {
8390
return this._elementRef.nativeElement;
8491
}
92+
93+
private _startResizeObserver() {
94+
this._stopResizeObserver();
95+
this._stopResizeObserver = this._ngZone.runOutsideAngular(() =>
96+
this._resizeObserver.observe(this._elementRef.nativeElement, () => this.resized.emit(), {
97+
box: 'border-box',
98+
}),
99+
);
100+
}
85101
}
86102

87103
/**

src/material/form-field/form-field.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
-->
1717
<label matFormFieldFloatingLabel
1818
[floating]="_shouldLabelFloat()"
19+
[monitorResize]="appearance === 'outline'"
1920
*ngIf="_hasFloatingLabel()"
2021
[id]="_labelId"
2122
[attr.for]="_control.id"

0 commit comments

Comments
 (0)