fix(material-experimental/form-field): fix notch width after appearance change (#19682)

* fix(material-experimental/form-field): fix notch width after appearance change

* adjust CSS to remove need for CD

* use fixture.nativeElement instead of document

* remove unnecessary import

* adjust test expectations

* use auto instead of blocklisted initial

Author: andrewseguin

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

@@ -56,8 +56,8 @@
   // we do not want to overwrite. *Note*: We need to have increased specificity for this
   // override because the `right` property will be set with higher specificity in RTL mode.
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mdc-floating-label {
-    left: 0;
-    right: 0;
+    left: auto;
+    right: auto;
   }
 
   // MDC sets the input elements in outline appearance to "display: flex". There seems to

src/material-experimental/mdc-form-field/form-field.ts

@@ -172,10 +172,12 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   set appearance(value: MatFormFieldAppearance) {
     const oldValue = this._appearance;
     this._appearance = value || (this._defaults && this._defaults.appearance) || DEFAULT_APPEARANCE;
-    // If the appearance has been switched to `outline`, the label offset needs to be updated.
-    // The update can happen once the view has been re-checked, but not immediately because
-    // the view has not been updated and the notched-outline floating label is not present.
     if (this._appearance === 'outline' && this._appearance !== oldValue) {
+      this._refreshOutlineNotchWidth();
+
+      // If the appearance has been switched to `outline`, the label offset needs to be updated.
+      // The update can happen once the view has been re-checked, but not immediately because
+      // the view has not been updated and the notched-outline floating label is not present.
       this._needsOutlineLabelOffsetUpdateOnStable = true;
     }
   }

src/material-experimental/mdc-input/input.spec.ts

@@ -1094,6 +1094,23 @@ describe('MatMdcInput with forms', () => {
     expect(formField._control.empty).toBe(false);
   }));
 
+  it('should update notch size after changing appearance to outline', fakeAsync(() => {
+    const fixture = createComponent(MatInputWithAppearance);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.mdc-notched-outline__notch')).toBe(null);
+
+    fixture.componentInstance.appearance = 'outline';
+    fixture.detectChanges();
+
+    let notch = fixture.nativeElement.querySelector('.mdc-notched-outline__notch')! as HTMLElement;
+    expect(notch.style.width).toBeFalsy();
+
+    fixture.nativeElement.querySelector('input')!.focus();
+    fixture.detectChanges();
+
+    expect(notch.style.width).toBeTruthy();
+  }));
 });
 
 describe('MatFormField default options', () => {
@@ -1498,6 +1515,7 @@ class MatInputWithLabel {}
 @Component({
   template: `
     <mat-form-field [appearance]="appearance">
+      <mat-label>My Label</mat-label>
       <input matInput placeholder="Placeholder">
     </mat-form-field>
   `