@@ -28,7 +28,8 @@ describe('MatTextareaAutosize', () => {
28
28
AutosizeTextareaInATab ,
29
29
AutosizeTextAreaWithContent ,
30
30
AutosizeTextAreaWithValue ,
31
- AutosizeTextareaWithNgModel
31
+ AutosizeTextareaWithNgModel ,
32
+ AutosizeTextareaWithLongPlaceholder
32
33
] ,
33
34
} ) ;
34
35
@@ -176,6 +177,27 @@ describe('MatTextareaAutosize', () => {
176
177
. toBe ( textarea . scrollHeight , 'Expected textarea height to match its scrollHeight' ) ;
177
178
} ) ;
178
179
180
+ it ( 'should not calculate wrong content height due to long placeholders' , ( ) => {
181
+ const fixtureWithPlaceholder = TestBed . createComponent ( AutosizeTextareaWithLongPlaceholder ) ;
182
+ fixtureWithPlaceholder . detectChanges ( ) ;
183
+
184
+ textarea = fixtureWithPlaceholder . nativeElement . querySelector ( 'textarea' ) ;
185
+ autosize = fixtureWithPlaceholder . debugElement . query (
186
+ By . directive ( MatTextareaAutosize ) ) . injector . get < MatTextareaAutosize > ( MatTextareaAutosize ) ;
187
+
188
+ triggerTextareaResize ( ) ;
189
+
190
+ const heightWithLongPlaceholder = textarea . clientHeight ;
191
+
192
+ fixtureWithPlaceholder . componentInstance . placeholder = 'Short' ;
193
+ fixtureWithPlaceholder . detectChanges ( ) ;
194
+
195
+ triggerTextareaResize ( ) ;
196
+
197
+ expect ( textarea . clientHeight ) . toBe ( heightWithLongPlaceholder ,
198
+ 'Expected the textarea height to be the same with a long placeholder.' ) ;
199
+ } ) ;
200
+
179
201
it ( 'should resize when an associated form control value changes' , fakeAsync ( ( ) => {
180
202
const fixtureWithForms = TestBed . createComponent ( AutosizeTextareaWithNgModel ) ;
181
203
textarea = fixtureWithForms . nativeElement . querySelector ( 'textarea' ) ;
@@ -227,8 +249,18 @@ describe('MatTextareaAutosize', () => {
227
249
textarea = fixtureWithForms . nativeElement . querySelector ( 'textarea' ) ;
228
250
expect ( textarea . getBoundingClientRect ( ) . height ) . toBeGreaterThan ( 1 ) ;
229
251
} ) ;
230
- } ) ;
231
252
253
+ /** Triggers a textarea resize to fit the content. */
254
+ function triggerTextareaResize ( ) {
255
+ // To be able to trigger a new calculation of the height with a short placeholder, the
256
+ // textarea value needs to be changed.
257
+ textarea . value = '1' ;
258
+ autosize . resizeToFitContent ( ) ;
259
+
260
+ textarea . value = '' ;
261
+ autosize . resizeToFitContent ( ) ;
262
+ }
263
+ } ) ;
232
264
233
265
// Styles to reset padding and border to make measurement comparisons easier.
234
266
const textareaStyleReset = `
@@ -269,6 +301,17 @@ class AutosizeTextareaWithNgModel {
269
301
model = '' ;
270
302
}
271
303
304
+ @Component ( {
305
+ template : `
306
+ <mat-form-field style="width: 100px">
307
+ <textarea matInput matTextareaAutosize [placeholder]="placeholder"></textarea>
308
+ </mat-form-field>` ,
309
+ styles : [ textareaStyleReset ] ,
310
+ } )
311
+ class AutosizeTextareaWithLongPlaceholder {
312
+ placeholder = 'Long Long Long Long Long Long Long Long Placeholder' ;
313
+ }
314
+
272
315
@Component ( {
273
316
template : `
274
317
<mat-tab-group>
0 commit comments