angular / angular/components

bug(cdk/text-field/autosize): Scrollbar appears when line-height is a decimal and autosizing is enabled

Đang mở
#32,178 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/scrolling 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 using a `` with `cdkTextareaAutosize` and a **decimal numeric** `line-height` **value** (for example `1.15`), a vertical scrollbar appears even when the content fits perfectly within the view.
This happens despite autosizing being enabled, and the field should automatically expand to fit content without a scrollbar.

This issue does not occur when `line-height` **is an integer** (e.g. `1 or 2`).

**Technical Observation**
The browser appears to truncates decimal values internally (e.g. from `16.08 px` to `16 px`) when returning the clone's height to Angular.
As a result, when the text area expands to its autosized height (e.g. `4 lines`), the truncation introduces a small pixel mismatch, just enough to trigger a scrollbar.

**Possible solution:**
Angular CDK might need to account for fractional pixel rounding when computing `textarea` height.

### Reproduction

StackBlitz link: **https://stackblitz.com/edit/5xmbl7sj-53y6s3u8?file=src%2Fexample%2Ftext-field-autosize-textarea-example.html**
Steps to reproduce:
1. Open the StackBlitz link above
2. Set the browser zoom to `110%` **(important)**
3. Observe the `<textarea>` component with `cdkTextareaAutosize`
4. Notice the CSS rule applied
```css
textarea { line-height: 1.15 }
```
5. Fill in three lines of text, e.g. using
```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
```
6. Add one more character (`a`),
-> A scroll bar appears even though the text area expands correctly

### Expected Behavior

The `textarea` should **never display a scrollbar** when autosizing is enabled, regardless of `line-height` precision.

It should fully expand to fit content, even when `line-height` includes decimal or sub-pixel values.

<img width="225" height="103" alt="Image" src="https://github.com/user-attachments/assets/ab6a2276-c076-40d0-a1a9-b19570e8edaf" />

### Actual Behavior

A vertical scrollbar appears after the text fills exactly three lines and one additional character is entered.

The scrollbar is triggered despite autosizing correctly adjusting the height.

<img width="225" height="103" alt="Image" src="https://github.com/user-attachments/assets/1d84ea7a-2b80-4232-be47-2b75b5bf8bf7" />

### 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 bản tái hiện trên StackBlitz, đặc biệt là src/example/text-field-autosize-textarea-example.html, và tái hiện sự cố ở mức thu phóng trình duyệt 110% với cdkTextareaAutosize và line-height: 1.15. Theo dõi hành vi tự động điều chỉnh kích thước textarea của Angular CDK và xác minh rằng một textarea bốn dòng với line-height phân số không hiển thị thanh cuộn sau khi nhập thêm ký tự.

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.