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

* 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

@@ -10,6 +10,9 @@ import {Directive, ElementRef, Input, AfterViewInit} from '@angular/core';
   exportAs: 'mdTextareaAutosize',
   host: {
     '(input)': 'resizeToFitContent()',
+    // Textarea elements that have the directive applied should have a single row by default.
+    // Browsers normally show two rows by default and therefore this limits the minRows binding.
+    'rows': '1',
   },
 })
 export class MdTextareaAutosize implements AfterViewInit {
@@ -116,7 +119,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';