fix(form-field): make outline appearance work in situations where the… (

#10943) * fix(form-field): make outline appearance work in situations where the form field is not initially in the DOM * fix ssr
angular · Apr 21, 2018 · a0c77e2 · a0c77e2
1 parent deedebd
commit a0c77e2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git 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
@@ -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();
   }