Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MatTextareaAutosize height breaks when placeholder text longer than width of input #8013

Closed
jpduckwo opened this issue Oct 25, 2017 · 1 comment · Fixed by #8024
Closed
Assignees

Comments

@jpduckwo
Copy link

Bug, feature request, or proposal:

When you set a longer placeholder text on a textarea using autoresize, the calculated height for the textarea when empty wrong and changes once you start typing.

What is the expected behavior?

The empty value should just be the height of 1 line

What is the current behavior?

The resulting height with an empty field is the height that the textarea would be if the placeholder text was in it.

What are the steps to reproduce?

Set a long placeholder text on a textarea
see: https://angular-material2-issue-dkvdyn.stackblitz.io

      <mat-form-field style="width: 200px;">
        <textarea matInput matTextareaAutosize placeholder="Set something long in the placeholder"></textarea>
      </mat-form-field>
      <mat-form-field style="width: 200px;">
        <textarea matInput matTextareaAutosize placeholder="Short text fine"></textarea>
      </mat-form-field>

What is the use-case or motivation for changing an existing behavior?

Textarea height jumps when empty or not having a value

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chrome & Safari at least

Is there anything else we should know?

The placeholder text should be ignored when calculating the height of the textarea

@devversion devversion self-assigned this Oct 25, 2017
devversion added a commit to devversion/material2 that referenced this issue Oct 25, 2017
Long placeholders can cause the `scrollHeight` to be bigger than the actual content is. To ensure the `scrollHeight` is correct, the placeholders need to be removed temporarily.

Fixes angular#8013
jelbourn pushed a commit that referenced this issue Nov 18, 2017
Long placeholders can cause the `scrollHeight` to be bigger than the actual content is. To ensure the `scrollHeight` is correct, the placeholders need to be removed temporarily.

Fixes #8013
devversion added a commit to devversion/material2 that referenced this issue Nov 19, 2017
Long placeholders can cause the `scrollHeight` to be bigger than the actual content is. To ensure the `scrollHeight` is correct, the placeholders need to be removed temporarily.

Fixes angular#8013
jelbourn pushed a commit that referenced this issue Nov 20, 2017
Long placeholders can cause the `scrollHeight` to be bigger than the actual content is. To ensure the `scrollHeight` is correct, the placeholders need to be removed temporarily.

Fixes #8013
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants