fix(mdc-form-field): refresh notch width when toggling appearances (#…

…18776)

* fix(material-experimental/mdc-form-field): refresh notch width when toggling appearances

Previously, switching between outline and filled appearance caused the notch width to be
incorrect in some situations. This is because then notched-outline component does not sync
with the underlying MDC component in case width and open state have been set upon `ngOnInit`.

* refactor(material/material-experimental): reduce specificity of textarea overrides selector

(cherry picked from commit 76c3fb6)

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

@@ -12,9 +12,6 @@
 @mixin _mat-mdc-text-field-textarea-overrides() {
   // Ensures that textarea elements inside of the form-field have proper vertical spacing
   // to account for the floating label. Also ensures that there is no vertical text overflow.
-  // TODO(devversion): remove extra specificity if we removed the ":not(outline-appearance)"
-  // selector from the structure overwrites. Blocked on material-components-web#5326.
-  .mat-mdc-form-field > .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix
   .mat-mdc-textarea-input {
     resize: vertical;
     box-sizing: border-box;

src/material-experimental/mdc-form-field/directives/notched-outline.ts

@@ -62,6 +62,8 @@ export class MatFormFieldNotchedOutline implements AfterViewInit, OnChanges, OnD
       // that we cannot extend from the "MDCNotchedOutline".
       this._mdcNotchedOutline = MDCNotchedOutline.attachTo(this._elementRef.nativeElement);
     }
+    // Initial sync in case state has been updated before view initialization.
+    this._syncNotchedOutlineState();
   }
 
   ngOnChanges() {