angular / angular/components

[Textarea] Scroll position changes unexpectedly

未关闭
#8,992 15 条评论 20 个 reaction 已指派 0 人 在 GitHub 查看
area: material/input P3
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

从 src/lib/input/autosize.ts 第 197 行附近开始,在 Firefox 中使用链接的 StackBlitz 示例重现该问题,然后比较 textarea 位于 iOS 上具有 scroll overflow 的父元素中时的行为。完成标准是:在 autoSize textarea 中输入内容不再改变页面或父元素的滚动位置,并且正在输入的内容保持可见。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。