From 73022d8e20a5d9b7ba94f5ca6bc3eb53b22c1895 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 29 Jan 2025 18:09:54 +0100 Subject: [PATCH] fix(cdk/text-field): auto sizing broken if user styles stretch the element (#30412) Fixes that our logic for measuring the `textarea` was being thrown off by user code that stretches it out. --- src/cdk/text-field/autosize.ts | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/cdk/text-field/autosize.ts b/src/cdk/text-field/autosize.ts index 029c54142323..7d17f795de54 100644 --- a/src/cdk/text-field/autosize.ts +++ b/src/cdk/text-field/autosize.ts @@ -198,26 +198,30 @@ export class CdkTextareaAutosize implements AfterViewInit, DoCheck, OnDestroy { } // Use a clone element because we have to override some styles. - let textareaClone = this._textareaElement.cloneNode(false) as HTMLTextAreaElement; + const textareaClone = this._textareaElement.cloneNode(false) as HTMLTextAreaElement; + const cloneStyles = textareaClone.style; textareaClone.rows = 1; // Use `position: absolute` so that this doesn't cause a browser layout and use // `visibility: hidden` so that nothing is rendered. Clear any other styles that // would affect the height. - textareaClone.style.position = 'absolute'; - textareaClone.style.visibility = 'hidden'; - textareaClone.style.border = 'none'; - textareaClone.style.padding = '0'; - textareaClone.style.height = ''; - textareaClone.style.minHeight = ''; - textareaClone.style.maxHeight = ''; + cloneStyles.position = 'absolute'; + cloneStyles.visibility = 'hidden'; + cloneStyles.border = 'none'; + cloneStyles.padding = '0'; + cloneStyles.height = ''; + cloneStyles.minHeight = ''; + cloneStyles.maxHeight = ''; + + // App styles might be messing with the height through the positioning properties. + cloneStyles.top = cloneStyles.bottom = cloneStyles.left = cloneStyles.right = 'auto'; // 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'; + cloneStyles.overflow = 'hidden'; this._textareaElement.parentNode!.appendChild(textareaClone); this._cachedLineHeight = textareaClone.clientHeight;