angular / angular/components

bug(MatFormField): textarea can be reduce to a smaller height than it's content

Đang mở
#30,089 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/form-field P4
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

A `textarea` within a `mat-form-field` can be resized using the mouse. If its height is reduced to less than the height of a single line of text, a vertical scrollbar will appear, and the text within the `textarea` will become truncated. This occurs while the parent `mat-form-field` maintains a minimum height of 56px.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-wybpxw?file=src%2Findex.html,src%2Fmain.ts
Steps to reproduce:
1. using the mouse, reduce the `textarea` height below 24pixels => a vertical scrollbar appears

This bug can also be reproduced on Material's documentation: https://material.angular.io/components/form-field/overview#form-field-overview

### Expected Behavior

It should not be possible to reduce a `textarea` height below 24px, which represents a single line of text.

### Actual Behavior

When a `textarea` height is reduced below 24px, a vertical scrollbar appears even though the parent `mat-form-field` keeps a minimal height of 56px.

I also noticed that when the `textarea` height is reduced from 28px to 27px, the text within the `textarea` is moved up by 1px. The same behavior can be observed down to 24px. I couldn't understand why this occurs and I'm not sure it is related to the height problem described above.

### Environment

- Angular: 18.2.8
- CDK/Material: 18.2.8 (but could be reproduced on all versions of the Material documentation)
- Browser(s): Edge 131.0.2903.51 / Chrome 130.0.6723.116
- Operating System (e.g. Windows, macOS, Ubuntu): Windows / Ubuntu

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 StackBlitz được liên kết trong src/index.html và src/main.ts, sau đó so sánh hành vi với ví dụ form-field trong tài liệu Material. Bản sửa được hoàn tất khi textarea không thể được thay đổi kích thước xuống dưới 24px và văn bản của nó không bị cắt ngắn hoặc di chuyển ngoài dự kiến.

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
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
Đặc tả 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.