Material angular autocomplete: how to prevent the mat-options from closing after selecting an...

I am trying to prevent the mat-options panel from closing. I am using the mat-autocomplete and you can select multiple options, here is my code:

<mat-form-field *ngIf="filter.type === 'organisation'">
<mat-label>LABEL</mat-label>
<input
matInput
placeholder="PLACEHOLDER"
[matAutocomplete]="auto"
(input)="getContractors($event.target.value)"
/>
<mat-autocomplete #auto="matAutocomplete">
<ng-container *ngFor="let serviceType of [1, 2, 3]">
<mat-optgroup
[label]="getServiceTypeName(serviceType)"
*ngIf="groupedContractors[serviceType]"
>
<mat-option
*ngFor="
let contractor of groupedContractors[
serviceType
]
"
(click)="onContractorSelect(contractor)"
>
<mat-checkbox
[checked]="isSelectedContractor(contractor)"
>
{{ contractor.name }}
</mat-checkbox>
</mat-option>
</mat-optgroup>
</ng-container>
<mat-option *ngIf="contractors.length < 1" disabled>
TEXT
</mat-option>
</mat-autocomplete>
</mat-form-field>


I have tried using the MatAutocompleteTrigger and the $event.stopPropagation() but I have not been able to make it work without breaking my code. I don't really know what to try now so I hope someone can provide me with a proper solution.

Continue reading...