angular / angular/components

bug(CdkTextareaAutosize): Textarea does not scroll to active line

Đang mở
#31,871 1 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?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

18

### Description

Hello,

Is there currently a solution or planned fix for this issue?

As described in [issue 30841](https://github.com/angular/components/issues/30841)
, when using the textarea with cdkTextareaAutosize, the component does not automatically scroll to keep the cursor in view once the content exceeds the maxRows. This makes the textarea very difficult to use.

The problem occurs on Google Chrome (but not in Firefox).

It appeared starting from Angular Material v19.

In v18, the behavior was correct: https://v18.material.angular.dev/cdk/text-field/overview

From v19 up to the current version, the bug is reproducible in Chrome: https://material.angular.dev/cdk/text-field/overview

Thank you for your help and clarification.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/ozyjlswf?file=src%2Fexample%2Ftext-field-autosize-textarea-example.html
Steps to reproduce:
Using google Chrome:
1. start typing in the textarea (add lines pressing enter)
2. when more that 5 lines are added, cursor deapear and we are typing in the hidden part of the textarea (we don't see what we are typing anymore)

Do the same on Firefox:
- the textarea scrolls automatically to active line

### Expected Behavior

The textarea does not scroll automatically to the active line on google chrome

### Actual Behavior

The textarea should scroll automatically to the active line on all nagigators

### Environment

- Angular: 20
- CDK/Material: 20
- Browser(s): Google Chrome
- Operating System: Windows, macOS, Ubuntu

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

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

Hướng nghiên cứu

Tái hiện vấn đề bằng ví dụ StackBlitz được liên kết trong Chrome, sau đó so sánh hành vi với Firefox và các ví dụ Angular Material v18 và v20. Nhập hơn năm dòng vào textarea và xác minh rằng con trỏ vẫn hiển thị trong khi nhập; bản sửa được hoàn tất khi Chrome cuộn đến dòng đang hoạt động như Firefox.

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ó
4/5
Thời gian dự kiến
3-5 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
42/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.