fix(material/mdc-form-field): text-field should stretch based on host element (#18778)

Currently the MDC text-field uses `inline-flex` but does not expand
to the width of the form-field host element. We want the text-field
to be based on the actual form-field host element as it makes it easier
for developers to control the width of form-fields. i.e. adding
`display: block`, or specifying a maximum width.

Author: devversion

src/dev-app/mdc-input/mdc-input-demo.html

@@ -637,23 +637,27 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Autocomplete</mat-toolbar>
   <mat-card-content>
-    <mat-form-field class="demo-block">
-      <mat-label>Pick Number</mat-label>
-      <input type="text" aria-label="Number" matInput
-             [matAutocomplete]="autoComplete1">
-      <mat-autocomplete #autoComplete1="matAutocomplete">
-        <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
+    <p>
+      <mat-form-field>
+        <mat-label>Pick Number</mat-label>
+        <input type="text" aria-label="Number" matInput
+               [matAutocomplete]="autoComplete1">
+        <mat-autocomplete #autoComplete1="matAutocomplete">
+          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </p>
 
-    <mat-form-field appearance="outline" class="demo-block">
-      <mat-label>Pick Number</mat-label>
-      <input type="text" aria-label="Number" matInput
-             [matAutocomplete]="autoComplete2">
-      <mat-autocomplete #autoComplete2="matAutocomplete">
-        <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
+    <p>
+      <mat-form-field appearance="outline">
+        <mat-label>Pick Number</mat-label>
+        <input type="text" aria-label="Number" matInput
+               [matAutocomplete]="autoComplete2">
+        <mat-autocomplete #autoComplete2="matAutocomplete">
+          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </p>
   </mat-card-content>
 </mat-card>
 

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

@@ -38,6 +38,12 @@
   width: 100%;
 }
 
+// The MDC text-field should stretch to the width of the host `<mat-form-field>` element.
+// This allows developers to control the width without needing custom CSS overrides.
+.mat-mdc-text-field-wrapper {
+  width: 100%;
+}
+
 // Infix that contains the projected content (usually an input or a textarea). We ensure
 // that the projected form-field control and content can stretch as needed, but we also
 // apply a default infix width to make the form-field's look natural.