angular / angular/components

mat-form-field > textarea[matInput] shifts when resized to one row

Open
#11,724 0 comments 0 reactions 0 assignees View on GitHub
area: material/form-field 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:
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.