bug(mat-form-field): 'cols' attribute of <textarea> does not work with mat-form-field

[coralie6626]

Description

When using to wrap a <textarea>, setting a value for 'cols' attribute does not change the width of the <textarea>. This caused some consistency issues since the 'rows' attribute (which is used to set the height of <textarea>) still working as intended.

Reproduction

StackBlitz link: StackBlitz Example
Steps to reproduce:

1. wrap <textarea> with mat-form-field
2. change cols attribute value

Expected Behavior

The visible width of the <textarea> should be set according to the value of 'cols'.

Actual Behavior

Modifying 'cols' attribute value does not have any effect on the width of the <textarea>.

Environment

• Angular: ^18.0.0
• CDK/Material: ^18.0.0
• Browser(s): Google Chrome 126.0.6478.128 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[jullierme]

During my brief investigation, I found out that there is a CSS class mat-mdc-form-field-infix which sets a fixed width of 180px. Consequently, the width of the <textarea> is not automatically adjusted based on the cols attribute. If this behaviour is seen as a problem, I can try to fix it.

[coralie6626]

@jullierme Thank you for your response. I managed to find a workaround for my issue based on your comment.
By changing this css property, the cols attribute now have effect on the width of the mat-form-field.
mat-form-field .mat-mdc-form-field-infix { width: auto; }
However, I did noticed that the width property of mat-mdc-form-field-infix class does not have any major effect. The base width of mat-form-field is only slightly changed. I think it is still necessary to fix this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}