angular / angular/components

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

Đang mở
#32,192 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/text-field P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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`

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với ví dụ StackBlitz được liên kết tại src/example/text-field-autosize-textarea-example.html và tái hiện vấn đề bằng cách kích hoạt thanh cuộn của phần tử cha. Sau đó, lần theo phần triển khai cdkTextareaAutosize để so sánh các phép đo của bản sao với chiều rộng của textarea. Công việc được xem là hoàn tất khi văn bản vẫn hiển thị đầy đủ trong lúc thanh cuộn làm thay đổi chiều rộng khả dụng ở các phiên bản Angular và CDK được nêu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.