[Textarea] Scroll position changes unexpectedly

[MatthieuBarthel]

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

[xileftenurb]

Any new or workaround for this issue?

I cannot use very long textarea (for prettyfied JSON, by example) because of this.

the scrolling up happen with firefox for every character, and for chrome when adding a new line.
it also happen for both when I programmaticaly change the value of the textarea.

thank you

[fynnfeldpausch]

We have the same issue and this ticket is a blocker for us. Any updates?

[alexmarh]

I'm having a really terrible solution, but it works (CSS3, haven't checked if polyfill works).
Just add following line to the css rule of scrollable container:
scroll-padding-bottom: 1rem;

[kevin-lozoya]

It look like Firefox puts the focus on the row where it is being written. But in Angular, the textareas not have 'rows' attribute, so only have one row and it puts the focus on the first line.

If we put textarea.setAttribute('rows', Math.floor(height / this._cachedLineHeight)); after

components/src/cdk/text-field/autosize.ts

Line 226 in fcd9bf7

textarea.classList.remove('cdk-textarea-autosize-measuring');

we have solved the bug on Firefox, but on Chrome this calc:

components/src/cdk/text-field/autosize.ts

Line 222 in fcd9bf7

const height = textarea.scrollHeight - 4;

is incorrect, unlike on Firefox. The issue is when have less lines that before, not decreases the height. But when have more lines that before, it's fine, increases the height.

I tried put textarea.removeAttribute('rows'); after

components/src/cdk/text-field/autosize.ts

Line 217 in fcd9bf7

textarea.classList.add('cdk-textarea-autosize-measuring');

but I have same problem that before: Scroll position change.

I think that we need to do the calc in another way or distinguish in some way between browsers.

What do you think?

[mmalerba]

@kevin-lozoya I would prefer to find a method that works on all browsers, but if that is not possible we can try special-casing certain browsers. If you have a suggestion for a better way to calculate it, please feel free to send a PR and mention me on it. This calculation always seemed kind of hacky, but was the closest I was able to get after looking at it for a while

[whein]

I found that this issue could be avoided by removing the placeholder logic:

components/src/cdk/text-field/autosize.ts

Line 210 in fcd9bf7

const placeholderText = textarea.placeholder;

components/src/cdk/text-field/autosize.ts

Line 218 in fcd9bf7

textarea.placeholder = '';

components/src/cdk/text-field/autosize.ts

Line 227 in fcd9bf7

textarea.placeholder = placeholderText;

AFAIK this is only an option if your placeholder text will always fit on 1 line in the textarea.

[xileftenurb]

It there any update on this issue?
It does not seem to have any workaround for now, as all solution proposed need to modify the cdk direcly.

thank you

[samthe13th]

Also having an issue with this