From 3a766f148ff62aba82d41212c8f25c628de1636a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 2 Aug 2017 00:09:27 +0200
Subject: [PATCH] fix(autosize): properly detect line-height in firefox (#6190)

* fix(autosize): properly detect line-height in firefox

In Firefox it happens that textarea elements are always bigger than the specified amount of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.

As a workaround that removes the extra space for the scrollbar, we can just set overflow to hidden. This ensures that there is no invalid calculation of the line height.

See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654

Fixes #6179

* Fix test name
---
 src/lib/input/autosize.spec.ts | 15 +++++++++++++++
 src/lib/input/autosize.ts      |  7 +++++++
 2 files changed, 22 insertions(+)

diff --git a/src/lib/input/autosize.spec.ts b/src/lib/input/autosize.spec.ts
index a81e85c01563..e868c7cb63b1 100644
--- a/src/lib/input/autosize.spec.ts
+++ b/src/lib/input/autosize.spec.ts
@@ -130,6 +130,21 @@ describe('MdTextareaAutosize', () => {
       .toBeGreaterThan(previousMinHeight, 'Expected the textarea to grow to two rows.');
   });
 
+  it('should calculate the proper height based on the specified amount of max rows', () => {
+    fixture.componentInstance.content = [1, 2, 3, 4, 5, 6, 7, 8].join('\n');
+    fixture.detectChanges();
+    autosize.resizeToFitContent();
+
+    expect(textarea.clientHeight)
+      .toBe(textarea.scrollHeight, 'Expected textarea to not have a vertical scrollbar.');
+
+    fixture.componentInstance.maxRows = 5;
+    fixture.detectChanges();
+
+    expect(textarea.clientHeight)
+      .toBeLessThan(textarea.scrollHeight, 'Expected textarea to have a vertical scrollbar.');
+  });
+
   it('should properly resize to content on init', () => {
     // Manually create the test component in this test, because in this test the first change
     // detection should be triggered after a multiline content is set.
diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts
index 70d6afe22f7f..9a6177b22c2f 100644
--- a/src/lib/input/autosize.ts
+++ b/src/lib/input/autosize.ts
@@ -126,6 +126,13 @@ export class MdTextareaAutosize implements AfterViewInit {
     textareaClone.style.minHeight = '';
     textareaClone.style.maxHeight = '';
 
+    // In Firefox it happens that textarea elements are always bigger than the specified amount
+    // of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
+    // As a workaround that removes the extra space for the scrollbar, we can just set overflow
+    // to hidden. This ensures that there is no invalid calculation of the line height.
+    // See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
+    textareaClone.style.overflow = 'hidden';
+
     textarea.parentNode!.appendChild(textareaClone);
     this._cachedLineHeight = textareaClone.clientHeight;
     textarea.parentNode!.removeChild(textareaClone);