I am currently working on implementing a search filter for a multiple mat-select, but I have encountered an issue when searching and selecting items.
While my search function is functioning correctly, the problem arises when I search for an item, select it, then search for another item and select it as well. Only the last selected item remains due to my search not being reset, but I am unsure how to address this issue.
I attempted to clear the search input when closing the mat-select panel, however, this approach did not yield the desired result.
HTML:
<mat-select formControlName="testCategories" [(ngModel)]="testCategories"
multiple>
<input matInput class="search-input" type="text" placeholder="Search..."
(keyup)="onKey($event.target.value)" (keydown)="$event.stopPropagation()">
<mat-select-trigger>
<mat-chip-list>
<mat-chip *ngFor="let category of testCategories" [removable]="true"
(removed)="removeCategory(category)">
<div class="chip-text">{{ category.name }}</div>
<mat-icon class="icon-delete-circle-reverse" matChipRemove></mat-icon>
</mat-chip>
</mat-chip-list>
</mat-select-trigger>
<ng-container *ngFor="let category of selectedCategories">
<mat-option [value]="category.id">
{{ category.name }}
</mat-option>
</ng-container>
</mat-select>
TS:
onKey(value: string) {
this.selectedCategories = this.search(value);
}
search(value: string) {
this.filter = value.toLowerCase();
return this.categories.filter(option =>
option.name.toLowerCase().startsWith(this.filter));
}