mat-form-field > textarea[matInput] shifts when resized to one row
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Bug, feature request, or proposal:
When you resize a mat-form-field > textarea[matInput] down to one row, the contents of the textarea animate and shift downward, clipping.
#### What is the expected behavior?
There is no movement in the textarea or its content when it is resized.
#### What is the current behavior?
The content gets clipped.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-bg2qqg?file=app/app.component.html
Shorten the textarea
Bug also present on https://material.angular.io/components/form-field/overview
#### What is the use-case or motivation for changing an existing behavior?
A user can easily shorten an expandable textarea and should not have the text shift and clip.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Affects head Angular Material 2.
Linux Chrome, OS X Chrome.
But not present on Safari because textarea cannot resize smaller than it is on the demo page (locked at min 2 rows for me), unlike Chrome.
Contributor guide
Research direction
Reproduce the behavior from the linked StackBlitz, starting with app/app.component.html, and compare it with the Angular Material form-field overview demo. Resize textarea[matInput] to one row and verify that the textarea contents no longer move or become clipped.
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
- 45/100