From ea6c2956690a9a1c427f6af84ed07776a9b7fdbf Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 1 Aug 2017 10:12:11 +0200 Subject: [PATCH 1/2] 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 --- 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..fe281dc2ecfd 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 a 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); From 430f3734d33e1180f5a1492d94ea0de3c3c04fb6 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 1 Aug 2017 18:18:25 +0200 Subject: [PATCH 2/2] Fix test name --- src/lib/input/autosize.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/input/autosize.spec.ts b/src/lib/input/autosize.spec.ts index fe281dc2ecfd..e868c7cb63b1 100644 --- a/src/lib/input/autosize.spec.ts +++ b/src/lib/input/autosize.spec.ts @@ -130,7 +130,7 @@ describe('MdTextareaAutosize', () => { .toBeGreaterThan(previousMinHeight, 'Expected the textarea to grow to two rows.'); }); - it('should calculate the proper height a specified amount of max 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();