angular / angular/components

[Textarea] Scroll position changes unexpectedly

Ouverte
#8,992 15 commentaires 20 réactions 0 personnes assignées Voir sur GitHub
area: material/input P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
When filling a textarea, we should see what we are writing :-)

#### What is the current behavior?
Under some conditions, writing inside a textarea with autoSize directive makes the page scroll position changes (we get scrolled up ? sorry for my english).

#### What are the steps to reproduce?
To reproduce my issue:
- With latest firefox (tested on macOS), open https://angular-material2-issue-pnr2sj.stackblitz.io/
- Scroll down the page.
- Enter the textarea and press any key.
- Your scroll position changes on the page, most of the textarea content isn't visible anymore, which is very annoying for writing.

It also happens on iOS 11 when the textarea is inside a parent with scroll overflow (not the case on the stackblitz example, but I can create another one if needed). I cannot reproduce it on Chrome and I haven't tested other browsers.

I believe the issue is related to [this line](https://github.com/angular/material2/blob/master/src/lib/input/autosize.ts#L197), the parent's height get shorter for an instant which explains we get scrolled up.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Latest Angular and Material

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par src/lib/input/autosize.ts autour de la ligne 197 et reproduisez le problème à l’aide de l’exemple StackBlitz lié dans Firefox, puis comparez le comportement lorsque la textarea se trouve dans un parent avec un scroll overflow sur iOS. Le travail est terminé lorsque la saisie dans une textarea autoSize ne modifie plus la position de défilement de la page ou du parent et que le contenu saisi reste visible.

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é
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

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