bug(MatFormField): textarea can be reduce to a smaller height than it's content

[gillerr]

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

No response

Description

A textarea within a mat-form-field can be resized using the mouse. If its height is reduced to less than the height of a single line of text, a vertical scrollbar will appear, and the text within the textarea will become truncated. This occurs while the parent mat-form-field maintains a minimum height of 56px.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-wybpxw?file=src%2Findex.html,src%2Fmain.ts
Steps to reproduce:

1. using the mouse, reduce the textarea height below 24pixels => a vertical scrollbar appears

This bug can also be reproduced on Material's documentation: https://material.angular.io/components/form-field/overview#form-field-overview

Expected Behavior

It should not be possible to reduce a textarea height below 24px, which represents a single line of text.

Actual Behavior

When a textarea height is reduced below 24px, a vertical scrollbar appears even though the parent mat-form-field keeps a minimal height of 56px.

I also noticed that when the textarea height is reduced from 28px to 27px, the text within the textarea is moved up by 1px. The same behavior can be observed down to 24px. I couldn't understand why this occurs and I'm not sure it is related to the height problem described above.

Environment

• Angular: 18.2.8
• CDK/Material: 18.2.8 (but could be reproduced on all versions of the Material documentation)
• Browser(s): Edge 131.0.2903.51 / Chrome 130.0.6723.116
• Operating System (e.g. Windows, macOS, Ubuntu): Windows / Ubuntu

[gillerr]

For info, this is still relevant with Material 19