From a0c77e20d437e1fc6a629e1c645ca5a0173004b7 Mon Sep 17 00:00:00 2001
From: mmalerba <mmalerba@google.com>
Date: Fri, 20 Apr 2018 17:38:28 -0700
Subject: [PATCH] =?UTF-8?q?fix(form-field):=20make=20outline=20appearance?=
 =?UTF-8?q?=20work=20in=20situations=20where=20the=E2=80=A6=20(#10943)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(form-field): make outline appearance work in situations where the form field is not initially in the DOM

* fix ssr
---
 src/demo-app/input/input-demo.html | 20 ++++++++++++++++++++
 src/lib/form-field/form-field.ts   | 15 ++++++++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 1a370879666..850e0919f23 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -647,3 +647,23 @@
     </form>
   </mat-card-content>
 </mat-card>
+
+<mat-card class="demo-card demo-basic">
+  <mat-toolbar color="primary">Outline form field in a tab</mat-toolbar>
+  <mat-card-content>
+    <mat-tab-group>
+      <mat-tab label="Tab 1">
+        <mat-form-field appearance="outline">
+          <mat-label>Tab 1 input</mat-label>
+          <input matInput value="test">
+        </mat-form-field>
+      </mat-tab>
+      <mat-tab label="Tab 2">
+        <mat-form-field appearance="outline">
+          <mat-label>Tab 2 input</mat-label>
+          <input matInput value="test">
+        </mat-form-field>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index cf2fce1746e..10f9a326191 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -195,6 +195,8 @@ export class MatFormField extends _MatFormFieldMixinBase
 
   _outlineGapStart = 0;
 
+  _initialGapCalculated = false;
+
   /**
    * @deprecated
    * @deletion-target 7.0.0
@@ -265,15 +267,13 @@ export class MatFormField extends _MatFormFieldMixinBase
       this._syncDescribedByIds();
       this._changeDetectorRef.markForCheck();
     });
-
-    Promise.resolve().then(() => {
-      this.updateOutlineGap();
-      this._changeDetectorRef.markForCheck();
-    });
   }
 
   ngAfterContentChecked() {
     this._validateControlChild();
+    if (!this._initialGapCalculated) {
+      Promise.resolve().then(() => this.updateOutlineGap());
+    }
   }
 
   ngAfterViewInit() {
@@ -417,6 +417,10 @@ export class MatFormField extends _MatFormFieldMixinBase
     if (this.appearance === 'outline' && this._label && this._label.nativeElement.children.length) {
       if (this._platform && !this._platform.isBrowser) {
         // getBoundingClientRect isn't available on the server.
+        this._initialGapCalculated = true;
+        return;
+      }
+      if (!document.contains(this._elementRef.nativeElement)) {
         return;
       }
 
@@ -434,6 +438,7 @@ export class MatFormField extends _MatFormFieldMixinBase
       this._outlineGapStart = 0;
       this._outlineGapWidth = 0;
     }
+    this._initialGapCalculated = true;
     this._changeDetectorRef.markForCheck();
   }