feat(input): autosize sets default amount of rows to one

* The autosize directive now sets the rows property of the textarea to one by default.
* This is necessary because browsers by default set the rows property to two and therefore setting the minRows and maxRows binding to something below two doesn't work.

Fixes #4852

Author: devversion

src/lib/input/autosize.spec.ts

@@ -103,6 +103,27 @@ describe('MdTextareaAutosize', () => {
     expect(fixture.componentInstance.autosize.resizeToFitContent).toBeTruthy();
   });
 
+  it('should initially set the rows of a textarea to one', () => {
+    expect(textarea.rows)
+      .toBe(1, 'Expected the directive to initially set the rows property to one.');
+
+    fixture.componentInstance.minRows = 1;
+    fixture.detectChanges();
+
+    expect(textarea.rows)
+      .toBe(1, 'Expected the textarea to have the rows property set to one.');
+
+    const previousMinHeight = parseInt(textarea.style.minHeight);
+
+    fixture.componentInstance.minRows = 2;
+    fixture.detectChanges();
+
+    expect(textarea.rows).toBe(1, 'Expected the rows property to be set to one. ' +
+      'The amount of rows will be specified using CSS.');
+
+    expect(parseInt(textarea.style.minHeight))
+      .toBeGreaterThan(previousMinHeight, 'Expected the textarea to grow to two rows.');
+  });
 
   it('should properly resize to content on init', () => {
     // Manually create the test component in this test, because in this test the first change

src/lib/input/autosize.ts

@@ -71,9 +71,23 @@ export class MdTextareaAutosize implements AfterViewInit {
 
   ngAfterViewInit() {
     this._cacheTextareaLineHeight();
+    this._setInitialRows();
     this.resizeToFitContent();
   }
 
+  /**
+   * Sets the rows property of the textarea to one by default.
+   * Browsers by default set the rows property to two. Therefore setting the minRows and maxRows
+   * binding to something below two doesn't work.
+   */
+  private _setInitialRows() {
+    const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
+
+    // By default textarea elements that have the mdTextareaAutosize directive applied will
+    // have a single row by default. Browsers normally show two rows by default.
+    textarea.rows = 1;
+  }
+
   /** Sets a style property on the textarea element. */
   private _setTextareaStyle(property: string, value: string): void {
     const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
@@ -116,7 +130,8 @@ export class MdTextareaAutosize implements AfterViewInit {
 
   /** Resize the textarea to fit its content. */
   resizeToFitContent() {
-    let textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
+    const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
+
     // Reset the textarea height to auto in order to shrink back to its default size.
     textarea.style.height = 'auto';