I am encountering an issue with a mat-select in my Angular application that has multiselect enabled. Within the mat-select, there is an input used for filtering available options. The problem arises when I select some options, filter using the search input, and then add more options to the selection - the previously selected options are cleared. I want the previously selected options to remain selected as I continue adding more options through the search input. How can I modify my code to achieve this desired behavior?
<mat-select formControlName="services"
#searchSelect
multiple
[(ngModel)]="selectedServiceIds">
<mat-option class="searchable input-group" disabled>
<input
[disabled]="false"
type="text"
[(ngModel)]="searchService"
[ngModelOptions]="{ standalone: true }"
placeholder="Search ..."/>
<mat-icon class="float-right">search</mat-icon>
</mat-option>
<mat-option *ngFor="let service of services | filter : searchService"
[value]="service.id">
{{ service.name }}
</mat-option>
</mat-select>