@@ -50,7 +50,7 @@ describe('CdkTextareaAutosize', () => {
50
50
it ( 'should resize the textarea based on its content' , ( ) => {
51
51
let previousHeight = textarea . clientHeight ;
52
52
53
- fixture . componentInstance . content = `
53
+ textarea . value = `
54
54
Once upon a midnight dreary, while I pondered, weak and weary,
55
55
Over many a quaint and curious volume of forgotten lore—
56
56
While I nodded, nearly napping, suddenly there came a tapping,
@@ -68,7 +68,7 @@ describe('CdkTextareaAutosize', () => {
68
68
. toBe ( textarea . scrollHeight , 'Expected textarea height to match its scrollHeight' ) ;
69
69
70
70
previousHeight = textarea . clientHeight ;
71
- fixture . componentInstance . content += `
71
+ textarea . value += `
72
72
Ah, distinctly I remember it was in the bleak December;
73
73
And each separate dying ember wrought its ghost upon the floor.
74
74
Eagerly I wished the morrow;—vainly I had sought to borrow
@@ -85,6 +85,38 @@ describe('CdkTextareaAutosize', () => {
85
85
. toBe ( textarea . scrollHeight , 'Expected textarea height to match its scrollHeight' ) ;
86
86
} ) ;
87
87
88
+ it ( 'should keep the placeholder size if the value is shorter than the placeholder' , ( ) => {
89
+ fixture = TestBed . createComponent ( AutosizeTextAreaWithContent ) ;
90
+
91
+ textarea = fixture . nativeElement . querySelector ( 'textarea' ) ;
92
+ autosize = fixture . debugElement . query ( By . css ( 'textarea' ) ) !
93
+ . injector . get < CdkTextareaAutosize > ( CdkTextareaAutosize ) ;
94
+
95
+ fixture . componentInstance . placeholder = `
96
+ Once upon a midnight dreary, while I pondered, weak and weary,
97
+ Over many a quaint and curious volume of forgotten lore—
98
+ While I nodded, nearly napping, suddenly there came a tapping,
99
+ As of some one gently rapping, rapping at my chamber door.
100
+ “’Tis some visitor,” I muttered, “tapping at my chamber door—
101
+ Only this and nothing more.”` ;
102
+
103
+ fixture . detectChanges ( ) ;
104
+
105
+ expect ( textarea . clientHeight )
106
+ . toBe ( textarea . scrollHeight , 'Expected textarea height to match its scrollHeight' ) ;
107
+
108
+ let previousHeight = textarea . clientHeight ;
109
+
110
+ textarea . value = 'a' ;
111
+
112
+ // Manually call resizeToFitContent instead of faking an `input` event.
113
+ fixture . detectChanges ( ) ;
114
+ autosize . resizeToFitContent ( ) ;
115
+
116
+ expect ( textarea . clientHeight )
117
+ . toBe ( previousHeight , 'Expected textarea height not to have changed' ) ;
118
+ } ) ;
119
+
88
120
it ( 'should set a min-height based on minRows' , ( ) => {
89
121
expect ( textarea . style . minHeight ) . toBeFalsy ( ) ;
90
122
@@ -161,7 +193,7 @@ describe('CdkTextareaAutosize', () => {
161
193
} ) ;
162
194
163
195
it ( 'should calculate the proper height based on the specified amount of max rows' , ( ) => {
164
- fixture . componentInstance . content = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 ] . join ( '\n' ) ;
196
+ textarea . value = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 ] . join ( '\n' ) ;
165
197
fixture . detectChanges ( ) ;
166
198
autosize . resizeToFitContent ( ) ;
167
199
@@ -196,6 +228,27 @@ describe('CdkTextareaAutosize', () => {
196
228
. toBe ( textarea . scrollHeight , 'Expected textarea height to match its scrollHeight' ) ;
197
229
} ) ;
198
230
231
+ it ( 'should properly resize to placeholder on init' , ( ) => {
232
+ // Manually create the test component in this test, because in this test the first change
233
+ // detection should be triggered after a multiline placeholder is set.
234
+ fixture = TestBed . createComponent ( AutosizeTextAreaWithContent ) ;
235
+ textarea = fixture . nativeElement . querySelector ( 'textarea' ) ;
236
+ autosize = fixture . debugElement . query ( By . css ( 'textarea' ) ) !
237
+ . injector . get < CdkTextareaAutosize > ( CdkTextareaAutosize ) ;
238
+
239
+ fixture . componentInstance . placeholder = `
240
+ Line
241
+ Line
242
+ Line
243
+ Line
244
+ Line` ;
245
+
246
+ fixture . detectChanges ( ) ;
247
+
248
+ expect ( textarea . clientHeight )
249
+ . toBe ( textarea . scrollHeight , 'Expected textarea height to match its scrollHeight' ) ;
250
+ } ) ;
251
+
199
252
it ( 'should resize when an associated form control value changes' , fakeAsync ( ( ) => {
200
253
const fixtureWithForms = TestBed . createComponent ( AutosizeTextareaWithNgModel ) ;
201
254
textarea = fixtureWithForms . nativeElement . querySelector ( 'textarea' ) ;
@@ -298,14 +351,15 @@ const textareaStyleReset = `
298
351
@Component ( {
299
352
template : `
300
353
<textarea cdkTextareaAutosize [cdkAutosizeMinRows]="minRows" [cdkAutosizeMaxRows]="maxRows"
301
- #autosize="cdkTextareaAutosize">{{content}}</textarea>` ,
354
+ #autosize="cdkTextareaAutosize" [placeholder]="placeholder" >{{content}}</textarea>` ,
302
355
styles : [ textareaStyleReset ] ,
303
356
} )
304
357
class AutosizeTextAreaWithContent {
305
358
@ViewChild ( 'autosize' ) autosize : CdkTextareaAutosize ;
306
359
minRows : number | null = null ;
307
360
maxRows : number | null = null ;
308
361
content : string = '' ;
362
+ placeholder : string = '' ;
309
363
}
310
364
311
365
@Component ( {
0 commit comments