bug(cdk/text-field/autosize): incorrect height calculation when parent container adds a scrollbar due to textarea overflow

[ajitesh-copperleaf]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When a <textarea> with cdkTextareaAutosize has its width set to auto and sits flush against the edges of its parent container, autosize miscalculates its height when the parent container acquires a vertical scrollbar (typically when overflow-y: auto or scroll is set).

As soon as the parent container shows a vertical scrollbar - slightly reducing the effective available width - the autosize clone measures text wrapping differently, causing the textarea to underestimate the required number of rows. This results in clipped and partially hidden text.

Reproduction

StackBlitz link: https://stackblitz.com/edit/5xmbl7sj-bxb7txwe?file=src%2Fexample%2Ftext-field-autosize-textarea-example.html Steps to reproduce:

1. Open the StackBlitz Link above
2. Observe the <div> container with overflow-y: auto and the <textarea> component using cdkTextareaAutosize
3. Resize the viewport so the container becomes narrow enough to easily trigger a scrollbar
4. Insert text until the text area is filled and looks something like this, such that the scrollbar is triggered

5. Insert another letter like a, note how it disappears
6. Use the cursor to navigate to the bottom of the text and note how the top of the text in the textarea is clipping.

Expected Behavior

cdkTextareaAutosize should correctly measure the content height even when the parent container introduces a scrollbar that slightly changes the available width. The textarea should always fully display its content without clipping or requiring manual resizing.

Actual Behavior

When the container’s scrollbar appears, the autosize clone measures text wrapping as if no scrollbar were present. This results in a mismatch between measured and actual layout width, underestimating the required height by roughly one line. The resulting height is underestimated by roughly one line, leading to visible clipping.

Environment

• Angular: 20.2.4
• CDK/Material: 20.2.2
• Browser(s): Edge (141.0.3537.85), Chrome (141.0.7390.108) possibly more (tested on these)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[szoboszlaypali]

It does look like a Chromium issue, it doesn't happen in Firefox. The height itself seems to be calculated correctly by the code, which can be seen in the screen capture below

https://github.com/user-attachments/assets/dd3bf94c-f59f-4208-89b9-2461a30f360a

When I click outside of the textbox, the browser re-renders it and the new line is not clipping anymore.

[originalajitest]

@szoboszlaypali It is still clipping. It stopped clipping because you removed a character from the end. Or maybe I can't see it properly? Because on my end, I am able to recreate it easily in firefox (it looks worse than in chrome). Anyways, I do have a fix for it, just have been struggling to set up the repo and run tests before I make a PR.