From a9be63e741a57b7841d977de78fc223fd269ac0f Mon Sep 17 00:00:00 2001 From: Karan Mistry Date: Thu, 13 Mar 2025 12:41:11 +0530 Subject: [PATCH] fix(cdk/text-field): Long multiline textfield focus issue When we have long multiline textfield and put cursor on almost an end (For eg. on 3rd last line) the scroll moves up to the top of textarea. This fix will cache the `scrollTop` in `resizeToFitContent` method Fixes #20255 --- src/cdk/text-field/autosize.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/cdk/text-field/autosize.ts b/src/cdk/text-field/autosize.ts index e8ecc9fbaf63..fe2bfe622602 100644 --- a/src/cdk/text-field/autosize.ts +++ b/src/cdk/text-field/autosize.ts @@ -117,6 +117,8 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { private _cachedLineHeight?: number; /** Cached height of a textarea with only the placeholder. */ private _cachedPlaceholderHeight?: number; + /** Cached scroll top of a textarea */ + private _cachedScrollTop: number; /** Used to reference correct document/window */ protected _document? = inject(DOCUMENT, {optional: true}); @@ -303,6 +305,7 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { this._cacheTextareaLineHeight(); this._cacheTextareaPlaceholderHeight(); + this._cachedScrollTop = this._textareaElement.scrollTop; // If we haven't determined the line-height yet, we know we're still hidden and there's no point // in checking the height of the textarea. @@ -367,6 +370,7 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { // it to receive focus on IE and Edge. if (!this._destroyed.isStopped && this._hasFocus) { textarea.setSelectionRange(selectionStart, selectionEnd); + textarea.scrollTop = this._cachedScrollTop; } } }