angular / angular/components

[Textarea] Scroll position changes unexpectedly

Open
#8,992 15 comments 20 reactions 0 assignees View on GitHub
area: material/input P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start with src/lib/input/autosize.ts around line 197 and reproduce the issue using the linked StackBlitz example in Firefox, then compare the behavior when the textarea is inside a parent with scroll overflow on iOS. Done means typing in an autoSize textarea no longer changes the page or parent scroll position and the content being entered remains visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.