Components: [Tabs] Textarea values not shown in hidden tabs

[ybeauchamph]

Bug, feature request, or proposal:

The value of text area with mdTextareaAutosize is not visible until the size of the text area is recalculated (with resizeToFitContent() or by typing) when the text area is inside an MdTab that is not initially visible.
The min rows is also not working.

What is the expected behavior?

The text area value is visible and min rows works.

What is the current behavior?

The text area value is not visible until the value change by typing or resizeToFitContent is called and min rows doesn't works.

What are the steps to reproduce?

http://plnkr.co/edit/h4EYvCm36ncKlJolJnhU?p=preview
Open plunker and go to the second tab.

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

Angular: 4.2.3
Material: 2.0.0-beta.6
Windows 10
Typescript: 2.3.4

[ybeauchamph]

Related to #3346.

[amcdnl]

@jelbourn - This is likely related to https://github.com/angular/material2/issues/1854.

The size of the textarea is calculated on init of the component and the component is not actually injected into the dom until the user clicks the tab.

Another approach for resolution would be to use the intersection observer to detect when the textarea is in view and then calculate the size. Reference: https://github.com/w3c/IntersectionObserver/blob/gh-pages/explainer.md ... this might be nice CDK directive to have for other situations too.

[jelbourn]

IntersectionObserver is a _long_ way away from being usable on the platforms we support.

This is mostly the same as #3346. I don't have any greats ideas for a good way for the autosize to know when it should "go" based on being hidden or not in the DOM. @crisbeto @andrewseguin any thoughts?

[crisbeto]

In this case it might be best not to try and handle it automatically, or we risk destroying performance. Instead consumers can get a hold of the MdTextareaAutosize instance and call resizeToFitContent manually when appropriate. Note that we'll probably have to tweak resizeToFitContent since it won't do anything if the value hasn't changed.

[jelbourn]

We could do something like setting the previous value to '' if the height is zero

[MatthewTrout]

I'd like to be able to get hold of the MdTextareaAutosize instance in order to call resizeToFitContent when appropriate, but I cannot seem to find out how to get a reference to it...

[ybeauchamph]

@MatthewTrout You can use the ViewChildren decorator.

In your class properties:
@ViewChildren(MdTextareaAutosize) textareaAutosizes: QueryList<MdTextareaAutosize>;

Then you can use it in AfterViewInit:
this.textareaAutosizes.forEach(autosize => autosize.resizeToFitContent());

[amcdnl]

@MatthewTrout - You will be able to use the lazy loaded tab feature when it comes out and that should fix this issue.

[myrddraall]

@Zihark17 this doesn't work due to:

if (textarea.value === this._previousValue) {
    return;
}

at the top of the resizeToFitContent function

this works but its a nasty workaround:

this.textareaAutosizes.forEach(autosize => {
    autosize ['_previousValue'] = undefined;
    autosize.resizeToFitContent();
});