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

Author: devversion

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.

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);