angular / angular/components

[Textarea] Scroll position changes unexpectedly

Offen
#8,992 15 Kommentare 20 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/input P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit src/lib/input/autosize.ts um Zeile 197 und reproduziere das Problem anhand des verlinkten StackBlitz-Beispiels in Firefox. Vergleiche anschließend das Verhalten, wenn sich die textarea innerhalb eines übergeordneten Elements mit scroll overflow auf iOS befindet. Die Arbeit ist abgeschlossen, wenn das Tippen in einer autoSize textarea die Scroll-Position der Seite oder des übergeordneten Elements nicht mehr verändert und der eingegebene Inhalt sichtbar bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.