From 7611e8f0e4772d7e8f149e15633e70ccc7d92394 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 20 Apr 2018 14:23:58 -0700
Subject: [PATCH 1/2] fix(form-field): make outline appearance work in
 situations where the form field is not initially in the DOM

---
 src/demo-app/input/input-demo.html | 20 ++++++++++++++++++++
 src/lib/form-field/form-field.ts   | 14 +++++++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 1a3708796669..850e0919f235 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -647,3 +647,23 @@ <h3>&lt;textarea&gt; with ngModel</h3>
     </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 cf2fce1746e5..495c0456ec78 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() {
@@ -419,6 +419,9 @@ export class MatFormField extends _MatFormFieldMixinBase
         // getBoundingClientRect isn't available on the server.
         return;
       }
+      if (!document.contains(this._elementRef.nativeElement)) {
+        return;
+      }
 
       const containerStart = this._getStartEnd(
           this._connectionContainerRef.nativeElement.getBoundingClientRect());
@@ -434,6 +437,7 @@ export class MatFormField extends _MatFormFieldMixinBase
       this._outlineGapStart = 0;
       this._outlineGapWidth = 0;
     }
+    this._initialGapCalculated = true;
     this._changeDetectorRef.markForCheck();
   }
 

From ff368aaed85530d88c0105353074bb2401d8a759 Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Fri, 20 Apr 2018 16:38:59 -0700
Subject: [PATCH 2/2] fix ssr

---
 src/lib/form-field/form-field.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
index 495c0456ec78..10f9a3261915 100644
--- a/src/lib/form-field/form-field.ts
+++ b/src/lib/form-field/form-field.ts
@@ -417,6 +417,7 @@ 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)) {