( Angular 8) I'm using mat-error, it breaks click or change events

Question

Hello,

I am using mat-Select and mat-error. There is no problem in giving a warning, but after giving a warning, the 'mat-error' breaks the 'mat-select' event broked.

I press mat-select more than once (click) event but it works.

The place where the mat-error warning is making the click event invalid.

sample code is as follows.

 <mat-select class="classic" 
    disableOptionCentering 
    formControlName="bonusId" 
    selectionChange)="onChangeCategory($event)">
            <mat-option class="kt-option" *ngFor="let bonusType of bonusTypeDataSource" [value]="bonusType.id">
    {{bonusType.id}}.{{bonusType.name}}
             </mat-option>
        </mat-select>
        <mat-error class="form-control-feedback" *ngIf="bonusFormGroup.controls.bonusId.errors && (bonusFormGroup.controls.bonusId.dirty || bonusFormGroup.controls.bonusId.touched)
&& bonusFormGroup.controls.bonusId.errors.required">
           Error
    </mat-error>
 </mat-form-field>