Estou usando o MatDialog do Angular Material para abrir um form com alguns dados, mas ao abrir esse Dialog o mat-form-field não é totalmente renderizado, percebi que ao tirar o foco da página do site indo para outra aba ou abrindo o iniciar do windows ele renderiza totalmente mas não achei nenhuma solução.
Tela com o foco na página:
Ao abrir o Dialog os mat-form-field não estão totalmente renderizados
Tela sem o foco na página:
Apos tirar o foco da pagina os mat-form-field são totalmente rederizados mostrando o label e a linha inferior
html do Componente Dialog:
<div class="div_titulo">
<h1 mat-dialog-title>Produto</h1>
</div>
<div mat-dialog-content>
<form [formGroup]="produtoForm">
<div>
<mat-form-field>
<mat-label>Código</mat-label>
<input matInput formControl="codigo" name="codigo" value="{{produto.codigo}}">
</mat-form-field>
<mat-form-field >
<mat-label>Código de Barras</mat-label>
<input matInput formControl="codigoBarras" name="codigoBarras" value="{{produto.codigoBarra}}">
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-label>Nome</mat-label>
<input matInput formControl="nome" name="nome" value="{{produto.nome}}">
</mat-form-field>
</div>
<div>
<mat-form-field>
<mat-label>NCM</mat-label>
<input matInput formControl="ncm" name="ncm" value="{{produto.ncm}}">
</mat-form-field>
<mat-form-field>
<mat-label>CFOP</mat-label>
<input matInput formControl="cfop" name="cfop" value="{{produto.cfop}}">
</mat-form-field>
<mat-form-field>
<mat-label>CST</mat-label>
<input matInput formControl="cst" name="cst" value="{{produto.cst}}">
</mat-form-field>
</div>
</form>
</div>
<div mat-dialog-actions>
<button mat-raised-button color="primary" (click)="saveProduto()">Salvar</button>
<button mat-button (click)="cancel()">Cancelar</button>
</div>