From d0a4e9fd6ad2b282307d69a35b0e97b7cacde9c8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 19 Apr 2018 11:45:40 -0600 Subject: [PATCH] fix(text-field): autosize textarea not scrolling to end of input on firefox (#10403) Fixes the textarea not being scrolled to the text cursor when the textarea is resized on Firefox. Fixes #10400. --- src/cdk/text-field/autosize.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/cdk/text-field/autosize.ts b/src/cdk/text-field/autosize.ts index 12dcc43676b..568b0c1d61f 100644 --- a/src/cdk/text-field/autosize.ts +++ b/src/cdk/text-field/autosize.ts @@ -191,11 +191,22 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { textarea.style.overflow = 'hidden'; textarea.placeholder = ''; + const height = textarea.scrollHeight; + // Use the scrollHeight to know how large the textarea *would* be if fit its entire value. - textarea.style.height = `${textarea.scrollHeight}px`; + textarea.style.height = `${height}px`; textarea.style.overflow = ''; textarea.placeholder = placeholderText; + // On Firefox resizing the textarea will prevent it from scrolling to the caret position. + // We need to re-set the selection in order for it to scroll to the proper position. + if (typeof requestAnimationFrame !== 'undefined') { + this._ngZone.runOutsideAngular(() => requestAnimationFrame(() => { + const {selectionStart, selectionEnd} = textarea; + textarea.setSelectionRange(selectionStart, selectionEnd); + })); + } + this._previousValue = value; }