fix(material-experimental/mdc-form-field): Properly handle when defau…

…lts setting is 'dynamic' and the subscriptSizing input is not present. (#24263)
angular · Jan 25, 2022 · b79406f · b79406f
1 parent 2b67397
commit b79406f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/material-experimental/mdc-form-field/form-field.ts b/src/material-experimental/mdc-form-field/form-field.ts
@@ -91,7 +91,7 @@ const DEFAULT_APPEARANCE: MatFormFieldAppearance = 'fill';
 /** Default appearance used by the form-field. */
 const DEFAULT_FLOAT_LABEL: FloatLabelType = 'auto';
 
-/** Default way that the suffix element height is set. */
+/** Default way that the subscript element height is set. */
 const DEFAULT_SUBSCRIPT_SIZING: SubscriptSizing = 'fixed';
 
 /**
@@ -225,7 +225,7 @@ export class MatFormField
   set subscriptSizing(value: SubscriptSizing) {
     this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
   }
-  private _subscriptSizing: SubscriptSizing = DEFAULT_SUBSCRIPT_SIZING;
+  private _subscriptSizing: SubscriptSizing | null = null;
 
   /** Text for the form field hint. */
   @Input()

diff --git a/src/material-experimental/mdc-input/input.spec.ts b/src/material-experimental/mdc-input/input.spec.ts
@@ -1430,7 +1430,7 @@ describe('MatFormField default options', () => {
     );
   });
 
-  it('changes the default value of subscriptSizing', () => {
+  it('changes the default value of subscriptSizing (undefined input)', () => {
     const fixture = createComponent(MatInputWithSubscriptSizing, [
       {
         provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -1448,6 +1448,25 @@ describe('MatFormField default options', () => {
         .classList.contains('mat-mdc-form-field-subscript-dynamic-size'),
     ).toBe(true);
   });
+
+  it('changes the default value of subscriptSizing (no input)', () => {
+    const fixture = createComponent(MatInputWithAppearance, [
+      {
+        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+        useValue: {
+          subscriptSizing: 'dynamic',
+        },
+      },
+    ]);
+
+    fixture.detectChanges();
+    expect(fixture.componentInstance.formField.subscriptSizing).toBe('dynamic');
+    expect(
+      fixture.nativeElement
+        .querySelector('.mat-mdc-form-field-subscript-wrapper')
+        .classList.contains('mat-mdc-form-field-subscript-dynamic-size'),
+    ).toBe(true);
+  });
 });
 
 function configureTestingModule(