Expression has changed after it was checked. Previous value: 'mat-focused: false'. Current value: 'mat-focused: true'. in angular 8? - angular8

Question

html code:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: false'. Current value: 'mat-focused: true'.
When I click packmaterial input it has given this error.
<div formArrayName="packageArray" *ngFor="let item of packageArray.controls; let i = index;">
<div [formGroupName]="i" class="add-div" >
<p>Level {{i+1}} Pack</p>
<div class="d-flex justify-content-between">
<mat-form-field>
<input matInput type="text" (click)="addLevelPack(i)" placeholder="Package Material" formControlName="packMaterial" required>
In this line, I have got this Error
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="UOM" formControlName="UOM" required>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Quantity" formControlName="Quantity" required>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Weight(kgs)" formControlName="weight" required>
</mat-form-field>
</div>
</div>
</div>
<div class="btn-custom" (click)="addPackage()">
<span mat-raised-button style="cursor:pointer">Add packaging +</span>
</div>
<p>Total packaging</p>
<div *ngFor="let item of packList; let i = index;">
<div class="file-name ">
<div class="d-flex">
<div class="p-2">
<div class="add-div d-flex justify-content-between">
<div> Level {{i+1}} Pack </div>
<div>{{item.packMaterial}}</div>
<div>{{item.UOM}}</div>
<div>{{item.Quantity}}</div>
<div>{{item.weight}}</div>
</div>
</div>
<div class="ml-auto p-2">(i need this arrangement also)
<mat-checkbox>WHD</mat-checkbox>
</div>
</div>
</div>
</div>
``````````````````````````````````````````````````````
component.ts(ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-focused: false'. Current value: 'mat-focused: true')
````````````````````````````````````````````````````````
ngOnInit() {
this.packageArray = this.formulationForm.get('packageArray') as FormArray;
this.addPackage();
}
addPackage(){
this.packageArray.push(this.createPackage());
}
createPackage():FormGroup{
return this.formBuilder.group({
packMaterial : new FormControl(null, Validators.required),
UOM : new FormControl(null, Validators.required),
Quantity: new FormControl(null, Validators.required),
weight: new FormControl(null, Validators.required)
});
}
addLevelPack(index){
this.dialog.open(SelectMaterialComponent, {data :{matList: this.packList , type: "Packaging"}, minWidth: '60vw', minHeight: '40vh'})
.afterClosed().subscribe( response => {
if(!!response) {
console.log(response);
this.formulationForm.get("packageArray").value.splice(-1, 1);
this.formulationForm.patchValue({packageArray : [
...this.formulationForm.get("packageArray").value,
{
packMaterial: response[0].title,
UOM: response[0].uom,
Quantity: 1,
weight: response[0].wt_in_kgs_per_unit
}
]});
this.packList = this.formulationForm.get("packageArray").value;
}
})
}

Answer 1

Try adding restoreFocus:false in your dialog configuration like this:
this.dialog.open(SelectMaterialComponent, {
restoreFocus:false, // <-- Line to add
data :{matList: this.pack....
... }
})