I have a mat-form-field which contains an input and a mat-autocomplete that contains a mat-option. The input has (blur) event while the mat-option has (onSelectionChange) event.
The problem I have is that when I select an item, the blur is invoked before the onSelectionChange event of the mat-option. The method for the blur event empties the input in case the value doesn't exist in the drop down. In case I remove the (blur) event of the input then (onSelectionChange) gets invoked. I need this to get invoked before the (blur) event.
After some research I found that I can use .setTimeOut inside the function for the (blur) which allows its body to be invoked after the function for (onSelectionChange), however, with this fix, focusing away from the input will delay emptying the input if it has a wrong value.
Here is the html code I have:
<mat-form-field [style.width.%]="fieldWidthPercentage">
<input matInput #tagsInput (blur)="checkIfMatch()">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of filteredAutoCompleteItems | async"
(onSelectionChange)="selected(item)" [value]="item">
{{ item.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
here is the function for the (blur) event:
checkIfMatch() {
setTimeout(() => {
// . . .
}, 1000);
}
}