angular / angular/components

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

Ouverte
#31,871 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/text-field P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Reproduisez le problème à l’aide de l’exemple StackBlitz lié dans Chrome, puis comparez le comportement avec Firefox et avec les exemples Angular Material v18 et v20. Saisissez plus de cinq lignes dans le textarea et vérifiez que le curseur reste visible pendant la saisie ; la correction est terminée lorsque Chrome fait défiler jusqu’à la ligne active comme Firefox.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.