Why is teaxtarea inside mat-form-field behaving so strangely?

Question

css

Hello. Maybe someone faced such a problem?
In general, there is a Form inside which there are 2 mat-form-fields. inside the first is input, inside the second is text-area. Here is the second one for some reason buggy and I can not understand why. That is, ma-form-field is buggy, since I checked without it and there was no glitch. Used Angular 6
Here is a video of how the bug works

<form [formGroup]="organizationForm" (ngSubmit)="saveOrganization()">
        <mat-form-field class="name-organization">
          <input matInput placeholder="Name of organization" formControlName="name" maxlength="64" minlength="1">
          <mat-error>Name is required!</mat-error>
        </mat-form-field>
        <mat-form-field class="description-wrapper desc">
          <textarea #tr
                    matInput placeholder="Description" formControlName="description"
                    rows="10"
                    maxlength="1000" minlength="0"></textarea>
          <mat-error>Description is required!</mat-error>
          <span class="desc-value">{{tr.value.length}}/1000</span>
        </mat-form-field>
        <button [ngClass]="{'save-button': true, 'disabled': uploading, 'active-button': organizationForm.dirty}" type="submit" [disabled]="uploading">Save</button>
      </form>

Answer 1

Remove the span tag from mat form field. If it doesn't help, show the description wrapper and desc classes.