I'm using reactive forms for implementing validation behavior. I have a problem with the validation of a dropdown component. The validation is shown before the mouseup event (The problem (yt link): Dropdown Validation)
Stackblitz link: https://angular-um4dtz.stackblitz.io/
.html
<div class="col-md-8">
<p-dropdown id="regionId" [required]="true" formControlName="selectedRegion"
placeholder="Select region (required)" [options]="regions" optionLabel="name"
[ngClass]="{'ng-invalid ng-dirty is-invalid' : (equipmentForm.get('selectedRegion').touched || equipmentForm.get('selectedRegion').dirty) && !equipmentForm.get('selectedRegion').valid }">
</p-dropdown>
<span class="invalid-feedback">
<span *ngIf="equipmentForm.get('selectedRegion').errors?.required">
Please select a region.
</span>
</span>
</div>
My question is, Is this expected behavior or?