From e0fc5266e827733eb2447cdc0a0800582ae6da3a Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Thu, 20 Jul 2017 10:57:50 -0700
Subject: [PATCH] fix(input): add overflow:hidden when calculating autosize
 height (#5773)

---
 e2e/components/input-e2e.spec.ts   | 21 +++++++++++++++++++++
 src/demo-app/input/input-demo.html |  3 ++-
 src/e2e-app/input/input-e2e.html   |  6 ++++++
 src/lib/input/autosize.ts          |  3 +++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/e2e/components/input-e2e.spec.ts b/e2e/components/input-e2e.spec.ts
index 484ed708acbe..b5be90caacad 100644
--- a/e2e/components/input-e2e.spec.ts
+++ b/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');
+    });
+  });
 });
diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index f3b5cc952d94..fb7a77e6d2ad 100644
--- a/src/demo-app/input/input-demo.html
+++ b/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>
diff --git a/src/e2e-app/input/input-e2e.html b/src/e2e-app/input/input-e2e.html
index 811883152282..eec53d27dd16 100644
--- a/src/e2e-app/input/input-e2e.html
+++ b/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>
diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts
index 255b3dd49261..796b03ca0ce7 100644
--- a/src/lib/input/autosize.ts
+++ b/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;
   }