mat-form-field with outline appearance doesn't resize border when label content change dynamicaly

[jcadiba]

Bug :

mat-form-field with outline appearance doesn't resize border when label content change dynamicaly

What is the expected behavior?

Borders must resize themselves automatically to take into account the dynamic changes of the label

What is the current behavior?

The borders take into account the initial value of the label but after if this value changes and it is longer than the initial value, the borders do not adapt to this change thus leaving a border overlapping the label

What are the steps to reproduce?

from this stackblitz, first when the form launch the label of the outline form field have the value "initial" and after write in first form field that is bind to the second form field mat-label the value "Long dynamic label" you will see the border will overlap the label
https://angular-axyjeg.stackblitz.io (https://stackblitz.com/edit/angular-axyjeg)

Before

After

[mcailleaux]

Same problem when use ngx translate with label, the gap is calculed with the translate key

<mat-form-field appearance="outline">
    <mat-label translate="ea6.design.menu.header.search"></mat-label>
    <input matInput [(ngModel)]="searchText"
           (ngModelChange)="searchChange()">
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

[Erick-Zanetti]

+1

[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.}