bug(MatFormField): textarea can be reduce to a smaller height than it's content
- 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
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