bug(cdk/text-field/autosize): incorrect height calculation when parent container adds a scrollbar due to textarea overflow
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
### 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 `` 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
<img width="309" height="249" alt="Image" src="https://github.com/user-attachments/assets/bd4bd212-e4e0-40b2-98bb-1ff800d20b33" />
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.
<img width="304" height="292" alt="Image" src="https://github.com/user-attachments/assets/70026306-40ba-4766-83ad-9cfc3c6fb5e5" />
### 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`
贡献指南
调研方向
从 src/example/text-field-autosize-textarea-example.html 中链接的 StackBlitz 示例开始,通过触发父元素的滚动条来复现该问题。然后跟踪 cdkTextareaAutosize 的实现,将克隆元素的测量结果与 textarea 的宽度进行比较。当滚动条改变报告的 Angular 和 CDK 版本中的可用宽度时,文本仍能完全显示,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100