mdTextareaAutosize doesn't work when changing a FormControl instance

[eyalhakim]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When changing the instance of the FormControl bound to the input, the input should resize according to the new value.

What is the current behavior?

The input does not resize

What are the steps to reproduce?

http://plnkr.co/edit/WJhcpwRK001maYYnu8AK?p=preview

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

Is there anything else we should know?

[jelbourn]

Dupe of #4657

[eyalhakim]

@jelbourn i saw this issue, but this one is about template-driven forms and mine is about reactive forms.

[jelbourn]

I believe it's the same underlying cause

[eyalhakim]

@jelbourn I see that it has been opened for more than a month. Do you guys have any plans on fixing it?

It's not just a minor bug since it misleads the user to think there is only one row of text whereas the rest is hidden.

[willshowell]

@eyalhakim here is an example of a workaround until it is fixed

http://plnkr.co/edit/gdZ6jOmQyzj2gg7ori44?p=preview

[eyalhakim]

@willshowell Thank you very much!
Can you show me how this would look like if i have more then one text area in my component?

[eyalhakim]

@willshowell also, this doesn't work well when changing the entire form group like in my example.

[willshowell]

@eyalhakim you can use @ViewChildren to get all the instances of MdTextareaAutosize in your template. That may help.

Also, you're right. You will have to call resizeToFitContent() manually if you're wishing to do that.

[eyalhakim]

@willshowell Thanks again!
The question is, when should i call it?

If i do so immediately after instantiating the FormGroup, it doesn't work because the new value was not bound to the input yet.

The valueChanges event is not called on first value initialization.

Currently, i simply call it after 50ms using setTimeout but that is a very ugly solution.

Do you have a better one?

[willshowell]

Off the top of my head, another (very lame, not better) solution I could think of would be to use an Observable.interval to trigger resizing for all autosize inputs in your template every 50ms.

Alternatively, use the FormGroup api for addControl, removeControl, setValue, etc. instead of reassigning this.form. Then you can subscribe to this.form.valueChanges...

But really, your best bet is to just wait until until #5315 is merged in the next couple days.

[eyalhakim]

@willshowell perfect, will wait. Thank you!

[eyalhakim]

@willshowell Hi, i just installed the new version and the issue still exists.
Can you check?

Thanks

[willshowell]

@eyalhakim Yeah you're right... @jelbourn could you reopen?

This updated plunker demos the original issue with master build

http://plnkr.co/edit/OWA1KW21Y14OxNkF39Br?p=preview

[eyalhakim]

@jelbourn Hi, was wondering if you have an intention to fix this one soon?

[eyalhakim]

@willshowell Hi, same question as above?

[willshowell]

Can't speak for Jeremy, but I'll try to take a look as soon as #5692 is merged.

[eyalhakim]

@jelbourn Hi! Issue still persist in beta 10. Is the fix part of it?

Thanks

[willshowell]

@eyalhakim it was merged just after the beta 10 release

Not working with beta 10: http://plnkr.co/edit/roR3rA3GryBk3r4pR1Ro?p=preview
Working with the master build: http://plnkr.co/edit/nqbIJtKcXr7dDDup2A6c?p=preview

[angular-automatic-lock-bot]

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.}