fix(input): add overflow:hidden when calculating autosize height (#5773)

Author: mmalerba

e2e/components/input-e2e.spec.ts

@@ -1,4 +1,5 @@
 import {browser, by, element} from 'protractor';
+import {screenshot} from '../screenshot';
 
 
 describe('input', () => {
@@ -53,4 +54,24 @@ describe('input', () => {
       expect(input.getAttribute('value')).toBe('abc123');
     });
   });
+
+  describe('autosize-textarea', () => {
+    beforeEach(() => browser.get('/input'));
+
+    it('should resize correctly', () => {
+      let input = element(by.id('autosize-text-area'));
+      input.sendKeys('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+      screenshot('autosize multiple rows');
+    });
+
+    it('should enfore max rows', () => {
+      let input = element(by.id('autosize-text-area'));
+      input.sendKeys(
+          'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
+          'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
+          'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
+          'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
+      screenshot('autosize more than max rows');
+    });
+  });
 });

src/demo-app/input/input-demo.html

@@ -394,13 +394,14 @@ <h4>Textarea</h4>
   <md-toolbar color="primary">Textarea Autosize</md-toolbar>
   <md-card-content>
     <h3>Regular &lt;textarea&gt;</h3>
-    <textarea mdTextareaAutosize class="demo-textarea"></textarea>
+    <textarea class="demo-textarea" mdTextareaAutosize mdAutosizeMaxRows="10"></textarea>
 
     <h3>&lt;textarea&gt; with md-input-container</h3>
     <div>
       <md-input-container>
         <textarea mdInput
                   mdTextareaAutosize
+                  mdAutosizeMaxRows="10"
                   placeholder="Autosized textarea"></textarea>
       </md-input-container>
     </div>

src/e2e-app/input/input-e2e.html

@@ -14,4 +14,10 @@
       <textarea mdInput id="text-area" placeholder="Enter some text"></textarea>
     </md-input-container>
   </p>
+  <p>
+    <md-input-container>
+      <textarea mdInput mdTextareaAutosize mdAutosizeMaxRows="10" id="autosize-text-area"
+                placeholder="Enter some text"></textarea>
+    </md-input-container>
+  </p>
 </section>

src/lib/input/autosize.ts

@@ -136,10 +136,13 @@ export class MdTextareaAutosize implements AfterViewInit {
     }
 
     // Reset the textarea height to auto in order to shrink back to its default size.
+    // Also temporarily force overflow:hidden, so scroll bars do not interfere with calculations.
     textarea.style.height = 'auto';
+    textarea.style.overflow = 'hidden';
 
     // Use the scrollHeight to know how large the textarea *would* be if fit its entire value.
     textarea.style.height = `${textarea.scrollHeight}px`;
+    textarea.style.overflow = '';
 
     this._previousValue = textarea.value;
   }