mat-form-field appearance=outline causing browser hang

[serates]

Bug, feature request, or proposal:

When using mat-form-field with appearance="outline" on a form field that is not initially available in the dom (such as hidden behind a *ngIf) My browser becomes unresponsive which makes me think there is some sort of infinite loop occuring

What is the expected behavior?

Should display correctly when hidden inside a ngIf or other dom hiding system, without causing my browser tab to freeze.

What is the current behavior?

Causes browser to hang.

What are the steps to reproduce?

Put a mat-form-field with appearance="outline" inside a *ngIf="" condition that is not true on initial render

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.01
Angular Material & CDK 6.0.2

Is there anything else we should know?

[CollinGraf314]

I'm running into a problem that seems similar to this. I have <mat-form-field *ngIf="..." appearance="outline"> where the *ngIf is false at first but true latter, however instead of my browser hanging, it seems to simply load as if appearance was set to "legacy"

[crisbeto]

@serates I wasn't able to reproduce it with this:

<mat-form-field appearance="outline" *ngIf="shouldShow">
  <input matInput [(ngModel)]="outlineAppearance">
</mat-form-field>

<button (click)="shouldShow = !shouldShow">Toggle</button>

Can you post the code that is breaking for you?

[serates]

So for me i have a situation of a parent compoennt that generally has a:

<div *ngIf="shouldShow">
   <ng-content select="[filters]"></ng-content>
</div>

Then in my use i'm using this component as

<reactive-header>
    <div filters>
        <mat-form-field appearance="outline">
        </mat-form-field>
    </div>
</reactive-header>

And the shouldSHow is false by default. I'll see if i can create a reproduction as well

[serates]

Reproduced in a stackblitz: https://stackblitz.com/edit/reproduce-outline-hang

In case the link doesn't work i've also attached a zip of it
reproduce-outline-hang.zip

[serates]

Fix confirmed in 6.2 of angular material thank you so much!!

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