fix(form-field): fixes for outline appearance (#9759)

* use the `AutofillMonitor` in `MatInput`

* Make `updateOutlineGap` public so users can call it if needed

Author: mmalerba

src/lib/form-field/_form-field-fill-theme.scss

@@ -87,13 +87,6 @@ $mat-form-field-fill-dedupe: 0;
                 $infix-margin-top);
       }
 
-      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
-      .mat-form-field-label {
-        @include _mat-form-field-fill-label-floating(
-                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
-                $infix-margin-top);
-      }
-
       // Server-side rendered matInput with a label attribute but label not shown
       // (used as a pure CSS stand-in for mat-form-field-should-float).
       .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper

src/lib/form-field/_form-field-legacy-theme.scss

@@ -87,6 +87,7 @@ $mat-form-field-legacy-dedupe: 0;
                 $subscript-font-scale, $infix-padding, $infix-margin-top);
       }
 
+      // @deletion-target 7.0.0 will rely on AutofillMonitor instead.
       .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
       .mat-form-field-label {
         @include _mat-form-field-legacy-label-floating(

src/lib/form-field/_form-field-outline-theme.scss

@@ -123,13 +123,6 @@ $mat-form-field-outline-dedupe: 0;
                 $infix-margin-top);
       }
 
-      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
-      .mat-form-field-label {
-        @include _mat-form-field-outline-label-floating(
-                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
-                $infix-margin-top);
-      }
-
       // Server-side rendered matInput with a label attribute but label not shown
       // (used as a pure CSS stand-in for mat-form-field-should-float).
       .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper

src/lib/form-field/_form-field-theme.scss

@@ -182,12 +182,6 @@ $mat-form-field-dedupe: 0;
               $subscript-font-scale, $infix-padding, $infix-margin-top);
     }
 
-    .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
-        .mat-form-field-label {
-      @include _mat-form-field-label-floating(
-              $subscript-font-scale, $infix-padding, $infix-margin-top);
-    }
-
     // Server-side rendered matInput with a label attribute but label not shown
     // (used as a pure CSS stand-in for mat-form-field-should-float).
     .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper

src/lib/form-field/form-field-control.ts

@@ -62,6 +62,12 @@ export abstract class MatFormFieldControl<T> {
    */
   readonly controlType?: string;
 
+  /**
+   * Whether the input is currently in an autofilled state. If property is not present on the
+   * control it is assumed to be false.
+   */
+  readonly autofilled?: boolean;
+
   /** Sets the list of element IDs that currently describe this control. */
   abstract setDescribedByIds(ids: string[]): void;
 

src/lib/form-field/form-field.scss

@@ -107,6 +107,7 @@ $mat-form-field-default-infix-width: 180px !default;
 // This is necessary because these browsers do not actually fire any events when a form auto-fill is
 // occurring. Once the autofill is committed, a change event happen and the regular mat-form-field
 // classes take over to fulfill this behaviour.
+// @deletion-target 7.0.0 will rely on AutofillMonitor instead.
 .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
     .mat-form-field-label {
   // The form field will be considered empty if it is autofilled, and therefore the label will

src/lib/form-field/form-field.ts

@@ -100,6 +100,7 @@ export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
     '[class.mat-form-field-should-float]': '_shouldLabelFloat()',
     '[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()',
     '[class.mat-form-field-disabled]': '_control.disabled',
+    '[class.mat-form-field-autofilled]': '_control.autofilled',
     '[class.mat-focused]': '_control.focused',
     '[class.mat-accent]': 'color == "accent"',
     '[class.mat-warn]': 'color == "warn"',
@@ -266,7 +267,7 @@ export class MatFormField extends _MatFormFieldMixinBase
     });
 
     Promise.resolve().then(() => {
-      this._updateOutlineGap();
+      this.updateOutlineGap();
       this._changeDetectorRef.detectChanges();
     });
   }
@@ -413,7 +414,7 @@ export class MatFormField extends _MatFormFieldMixinBase
    * Updates the width and position of the gap in the outline. Only relevant for the outline
    * appearance.
    */
-  private _updateOutlineGap() {
+  updateOutlineGap() {
     if (this.appearance === 'outline' && this._label && this._label.nativeElement.children.length) {
       const containerStart = this._getStartEnd(
           this._connectionContainerRef.nativeElement.getBoundingClientRect());

src/lib/input/input.ts

@@ -14,15 +14,17 @@ import {
   ElementRef,
   Inject,
   Input,
+  NgZone,
   OnChanges,
   OnDestroy,
   Optional,
   Self,
 } from '@angular/core';
 import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
-import {ErrorStateMatcher, mixinErrorState, CanUpdateErrorState} from '@angular/material/core';
+import {CanUpdateErrorState, ErrorStateMatcher, mixinErrorState} from '@angular/material/core';
 import {MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs/Subject';
+import {AutofillMonitor} from './autofill';
 import {getMatInputUnsupportedTypeError} from './input-errors';
 import {MAT_INPUT_VALUE_ACCESSOR} from './input-value-accessor';
 
@@ -58,6 +60,9 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
   selector: `input[matInput], textarea[matInput]`,
   exportAs: 'matInput',
   host: {
+    /**
+     * @deletion-target 7.0.0 remove .mat-form-field-autofill-control in favor of AutofillMonitor.
+     */
     'class': 'mat-input-element mat-form-field-autofill-control',
     '[class.mat-input-server]': '_isServer',
     // Native input properties that are overwritten by Angular inputs need to be synced with
@@ -105,6 +110,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
    */
   controlType: string = 'mat-input';
 
+  /**
+   * Implemented as part of MatFormFieldControl.
+   * @docs-private
+   */
+  autofilled = false;
+
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private
@@ -206,7 +217,9 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
               @Optional() _parentForm: NgForm,
               @Optional() _parentFormGroup: FormGroupDirective,
               _defaultErrorStateMatcher: ErrorStateMatcher,
-              @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any) {
+              @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
+              private _autofillMonitor: AutofillMonitor,
+              ngZone: NgZone) {
     super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
     // If no input value accessor was explicitly specified, use the element as the input value
     // accessor.
@@ -233,6 +246,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
       });
     }
 
+    this._autofillMonitor.monitor(this._elementRef.nativeElement)
+        .subscribe(event => ngZone.run(() => {
+          this.autofilled = event.isAutofilled;
+          this.stateChanges.next();
+        }));
+
     this._isServer = !this._platform.isBrowser;
   }
 
@@ -242,6 +261,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
 
   ngOnDestroy() {
     this.stateChanges.complete();
+    this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
   }
 
   ngDoCheck() {
@@ -324,7 +344,8 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
    * @docs-private
    */
   get empty(): boolean {
-    return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput();
+    return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
+        !this.autofilled;
   }
 
   /**