Preventing mat-autocomplete panel from closing when selecting multiple options

Question

I am trying to prevent the mat-autocomplete panel from closing when selecting multiple options. Here’s my implementation:

<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
                *ngIf="groupedContractors[serviceType]"
                [label]="getServiceTypeName(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>

What I’ve Tried

I have attempted the following approaches but haven't achieved the desired behavior:

1. Using MatAutocompleteTrigger – Attempted to programmatically control the dropdown behavior.
2. Calling $event.stopPropagation() – Prevented event bubbling but caused unexpected side effects.

I am unsure how to proceed without breaking my current implementation. Could someone suggest a clean and effective way to keep the dropdown open while allowing multiple selections?

Answer 1

For implementing mat-autocomplete with multi-select in Angular, check out this detailed GitHub discussion and solution:

🔗 GitHub Issue Comment - Angular Components #5053