Filter not working after including blur validation - angular material autocomplete

After adding blur validation to the angular material autocomplete dropdown, the search filter is not working properly when on change, instead filtering is happening on blur.

Expected behaviour: If enter any value, it should filter the dropdown list by on change.

Current behaviour: If enter any value, filtering dropdown list is not happening on change instead it is happening on blur.

html:

<td mat-cell *matCellDef="let element; let id = index;" [formGroup]="element" [formGroupName]="id">
<input type="text" [matAutocomplete]="auto" formControlName="name" (change)="onChange(element, id)" (blur)="onBlur(id, 'name')" (optionSelected)="onOptionSelected(id, 'name')" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option (mousedown)="$event.preventDefault()" *ngFor="let data of filterNames(element, id)" [value]="data">{{ data }}</mat-option>
</mat-autocomplete>
</td>


ts:

onChange(data: { value: { name: string; id: number; city: string } }, index: number) {
const i = this.modifiedArray.findIndex(x => x === data.value.id);
if (data.value.id) {
const data = this.data.find(x => x.id === data.value.id);
if (I != -1) { this.modifiedArray.splice(i, 1); }
}
}

onBlur(index: number, controlName: string) {
const control = this.form.at(index).get(controlName);
control?.markAsTouched();
control?.updateValueAndValidity();
}

onOptionSelected(index: number, controlName: string) {
const control = this.form.at(index).get(controlName);
control?.markAsTouched();
control?.updateValueAndValidity();
}

filterNames (data: { value: {name: string, id: number} }, id: number) {
return (data.value.name && this.namesList.filter(state => state.toLowerCase().includes(data.value.name?.toLowerCase()))) || this.namesList
}

Continue reading...