bug(cdk/text-field): cdkTextareaAutosize caches line height before matInput applies font: inherit, so min/max rows are wrong #33944

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.x (verified on v14.material.angular.dev, Angular 14.0.0)

Description

When cdkTextareaAutosize is used on a matInput textarea inside mat-form-field, the cached line height used for cdkAutosizeMinRows / cdkAutosizeMaxRows is measured with the browser's default textarea font instead of the form field's font. As a result, min-height / max-height are too small until the window is resized.

Cause (as far as I can tell):

• CdkTextareaAutosize measures and caches the line height on the first ngDoCheck (resizeToFitContent → _cacheTextareaLineHeight, cloning the textarea with rows=1).
• MatInput applies font: inherit via the class mat-mdc-form-field-input-control, which is a dynamic host binding ('[class.mat-mdc-form-field-input-control]': '_isInFormField').
• Host bindings are applied after ngDoCheck in the first change detection pass. So at measuring time the textarea (and its clone) still uses the UA default textarea font (Chrome: monospace 13.33px, line-height: normal ≈ 15px).
• The wrong value stays cached until a window resize clears it.

Measured on the official docs example (cdkAutosizeMaxRows="5", actual line height 24px):

It started with v15, i.e. the switch to the MDC-based form field.

Workaround: a global style so the textarea inherits the font before the first measurement:

textarea.cdk-textarea-autosize { font: inherit; letter-spacing: inherit; }

Reproduction

No StackBlitz needed – the official docs example reproduces it:
https://material.angular.dev/cdk/text-field/examples ("Auto-resizing textarea")

Steps to reproduce:

1. Open the page above (fresh load, don't resize the window).
2. Select the textarea in DevTools and run:

   ({ minHeight: $0.style.minHeight, maxHeight: $0.style.maxHeight, lineHeight: getComputedStyle($0).lineHeight })

   → minHeight: "15px", maxHeight: "75px", lineHeight: "24px"
3. Type more than 3 lines: the textarea starts scrolling after ~3 lines instead of 5.
4. Resize the browser window and run the snippet again → minHeight: "24px", maxHeight: "120px" (correct).

For comparison, the same example on https://v14.material.angular.dev/cdk/text-field/examples measures correctly on first load.

Expected Behavior

min-height / max-height are based on the actual line height of the textarea (24px → max-height: 120px for 5 rows) right after the first render.

Actual Behavior

They are based on the UA default textarea font (15px → max-height: 75px) until the window is resized.

Environment

• Angular 22.2.1
• CDK/Material 22.2.x
• Chrome (Version 154.0.8037.95 (64-Bit))
• Windows 11