Почему teaxtarea внутри mat-form-field ведет себя так странно?

Question

[AntonVirovets]

Здравствуйте. Может кто сталкивался с такой проблемой?
В общем есть Form внутри которого лежать 2 mat-form-field. внутри первого лежит input, внутри второго лежит text-area. Вот тот второй почему то глючит и я не могу понять почему. То есть глючит именно ma-form-field, так как я проверял без него и глюка небыло. Используется Angular 6
Вот видео как работает баг

<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>

Comments

[Mikola-BLR]

Пропустили видео в вопросе? Не вижу ссылку.
Либо на https://stackblitz.com/ залейте кусок кода и попробуйде воспроизвести баг и с нами ссылкой поделиться.

[AntonVirovets]

Mikola-BLR, Добавил видео

Answer 1

[kodwi]

Убери из mat form field тег span. Если не поможет, то покажи классы description wrapper и desc.