fix(input): make autosize work inside tabs & stepper (#7341)

Author: mmalerba

src/demo-app/stepper/stepper-demo.html

@@ -195,3 +195,13 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
     </div>
   </mat-step>
 </mat-horizontal-stepper>
+
+<h3>Stepper with autosize textarea</h3>
+<mat-horizontal-stepper>
+  <mat-step label="Step 1">
+    <mat-form-field>
+      <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+    </mat-form-field>
+  </mat-step>
+</mat-horizontal-stepper>
+

src/demo-app/tabs/tabs-demo.html

@@ -277,3 +277,14 @@ <h1>Tabs with background color</h1>
     </div>
   </mat-tab>
 </mat-tab-group>
+
+<h1>Tabs with autosize textarea</h1>
+<mat-tab-group class="demo-tab-group">
+  <mat-tab label="Tab 1">
+    <div class="tab-content">
+      <mat-form-field>
+        <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+      </mat-form-field>
+    </div>
+  </mat-tab>
+</mat-tab-group>

src/e2e-app/tabs/tabs-e2e.html

@@ -2,7 +2,9 @@
   <mat-tab-group>
     <mat-tab>
       <ng-template mat-tab-label>One</ng-template>
-      First tab's content
+      <mat-form-field>
+        <textarea matInput placeholder="Autosize textarea" matTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
+      </mat-form-field>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>Two</ng-template>

src/lib/input/autosize.spec.ts

@@ -4,6 +4,9 @@ import {ComponentFixture, TestBed, async, fakeAsync, flushMicrotasks} from '@ang
 import {By} from '@angular/platform-browser';
 import {MatInputModule} from './index';
 import {MatTextareaAutosize} from './autosize';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTabsModule} from '@angular/material/tabs';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 
 describe('MatTextareaAutosize', () => {
@@ -13,8 +16,16 @@ describe('MatTextareaAutosize', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MatInputModule, FormsModule],
+      imports: [
+        FormsModule,
+        MatInputModule,
+        MatStepperModule,
+        MatTabsModule,
+        NoopAnimationsModule,
+      ],
       declarations: [
+        AutosizeTextareaInAStep,
+        AutosizeTextareaInATab,
         AutosizeTextAreaWithContent,
         AutosizeTextAreaWithValue,
         AutosizeTextareaWithNgModel
@@ -202,6 +213,20 @@ describe('MatTextareaAutosize', () => {
     expect(textarea.clientHeight)
         .toBeGreaterThan(previousHeight, 'Expected the textarea height to have increased.');
   }));
+
+  it('should work in a tab', () => {
+    const fixtureWithForms = TestBed.createComponent(AutosizeTextareaInATab);
+    fixtureWithForms.detectChanges();
+    textarea = fixtureWithForms.nativeElement.querySelector('textarea');
+    expect(textarea.getBoundingClientRect().height).toBeGreaterThan(1);
+  });
+
+  it('should work in a step', () => {
+    const fixtureWithForms = TestBed.createComponent(AutosizeTextareaInAStep);
+    fixtureWithForms.detectChanges();
+    textarea = fixtureWithForms.nativeElement.querySelector('textarea');
+    expect(textarea.getBoundingClientRect().height).toBeGreaterThan(1);
+  });
 });
 
 
@@ -243,3 +268,33 @@ class AutosizeTextAreaWithValue {
 class AutosizeTextareaWithNgModel {
   model = '';
 }
+
+@Component({
+  template: `
+    <mat-tab-group>
+      <mat-tab label="Tab 1">
+        <mat-form-field>
+          <textarea matInput matTextareaAutosize>
+            Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
+          </textarea>
+        </mat-form-field>
+      </mat-tab>
+    </mat-tab-group>
+  `
+})
+class AutosizeTextareaInATab {}
+
+@Component({
+  template: `
+    <mat-horizontal-stepper>
+      <mat-step label="Step 1">
+        <mat-form-field>
+          <textarea matInput matTextareaAautosize>
+            Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
+          </textarea>
+        </mat-form-field>
+      </mat-step>
+    </mat-horizontal-stepper>
+  `
+})
+class AutosizeTextareaInAStep {}

src/lib/input/autosize.ts

@@ -71,7 +71,6 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
 
   ngAfterViewInit() {
     if (this._platform.isBrowser) {
-      this._cacheTextareaLineHeight();
       this.resizeToFitContent();
     }
   }
@@ -83,13 +82,17 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
   }
 
   /**
-   * Cache the height of a single-row textarea.
+   * Cache the height of a single-row textarea if it has not already been cached.
    *
    * We need to know how large a single "row" of a textarea is in order to apply minRows and
    * maxRows. For the initial version, we will assume that the height of a single line in the
    * textarea does not ever change.
    */
   private _cacheTextareaLineHeight(): void {
+    if (this._cachedLineHeight) {
+      return;
+    }
+
     let textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
 
     // Use a clone element because we have to override some styles.
@@ -124,11 +127,21 @@ export class MatTextareaAutosize implements AfterViewInit, DoCheck {
   }
 
   ngDoCheck() {
-    this.resizeToFitContent();
+    if (this._platform.isBrowser) {
+      this.resizeToFitContent();
+    }
   }
 
   /** Resize the textarea to fit its content. */
   resizeToFitContent() {
+    this._cacheTextareaLineHeight();
+
+    // If we haven't determined the line-height yet, we know we're still hidden and there's no point
+    // in checking the height of the textarea.
+    if (!this._cachedLineHeight) {
+      return;
+    }
+
     const textarea = this._elementRef.nativeElement as HTMLTextAreaElement;
     const value = textarea.value;