Closed
Description
The previous version in which this bug was not present was
No response
Description
After adding blur validation to the angular material autocomplete dropdown, the search filter is not working properly when on change, instead it is happening on blur.
Reproduction
component.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>
component.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
}
Expected Behavior
If enter any value, it should filter the dropdown list by on change
Actual Behavior
If enter any value, filtering dropdown list is not happening on change instead it is happening on blur.
Environment
- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):