cdkAutosizeMinRows and cdkAutosizeMaxRows settings of CdkTextareaAutosize not working as expected

Question

following first example in angular material docs: https://v15.material.angular.io/cdk/text-field/overview where settings are:

            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"

I can only provide 3 rows and component stops expanding showing inner scroll after 4 row input. Did I missed something out here?

I would expect component to expand to 5 rows and show inner scroll after input of 6th row. I found that it worked as expected on some old version of angular: https://stackblitz.com/angular/pbadbpbgyog?file=app%2Ftext-field-autosize-textarea-example.css

Answer 1

Looks like a bug in the angular CDK, since both code is identical but the bug is present in higher versions. you can raise a ticket on angular github page, for now, as a workaround, you can set the maxcolumns to be n + 3 (so 5 rows will be 8) which seems to work fine!

<mat-form-field appearance="fill">
  <mat-label>Font size</mat-label>
  <mat-select #fontSize value="16px" (selectionChange)="triggerResize()">
    <mat-option value="10px">10px</mat-option>
    <mat-option value="12px">12px</mat-option>
    <mat-option value="14px">14px</mat-option>
    <mat-option value="16px">16px</mat-option>
    <mat-option value="18px">18px</mat-option>
    <mat-option value="20px">20px</mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field [style.fontSize]="fontSize.value">
  <mat-label>Autosize textarea</mat-label>
  <textarea
    matInput
    cdkTextareaAutosize
    #autosize="cdkTextareaAutosize"
    cdkAutosizeMinRows="1"
    cdkAutosizeMaxRows="8"
  ></textarea>
</mat-form-field>

Stackblitz Demo