如何阻止mat-autocomplete面板在多选选项时关闭？

核心思路 #

默认点击mat-option会触发MatAutocomplete的面板关闭逻辑。在多选场景（用mat-checkbox作为选项内容）中，我们需要阻止这个默认行为，同时保留checkbox的选中逻辑和自定义选择处理函数。

具体实现步骤 #

1. 修改模板中的mat-option和mat-checkbox

通过事件拦截，避免触发Autocomplete的关闭逻辑，同时确保checkbox和自定义选择逻辑正常工作：

<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); $event.stopImmediatePropagation()"
                    [disableRipple]="true"
                >
                    <mat-checkbox 
                        [checked]="isSelectedContractor(contractor)"
                        (click)="$event.stopPropagation()"
                    >
                        {{ 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>

代码解释

• (click)="$event.stopPropagation()"（checkbox上）：阻止点击checkbox的事件冒泡到父级mat-option，避免触发mat-option的默认选中逻辑。
• (click)="onContractorSelect(contractor); $event.stopImmediatePropagation()"（mat-option上）：执行自定义选择函数后，立即阻止事件进一步传播，避免触发Autocomplete的面板关闭逻辑。
• [disableRipple]="true"：关闭mat-option的点击波纹效果，因为我们不需要它的默认选中反馈。

2. （可选）代码层面强制控制面板状态

如果上述方法仍有边缘情况（比如点击输入框外部意外关闭），可以通过MatAutocompleteTrigger手动控制面板状态：

首先在组件中获取触发器实例：

import { ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit, OnDestroy {
  @ViewChild(MatAutocompleteTrigger) private autocompleteTrigger!: MatAutocompleteTrigger;
  private destroy$ = new Subject<void>();

  ngAfterViewInit(): void {
    // 监听面板关闭事件，拦截选项点击导致的关闭
    this.autocompleteTrigger.panelClosingActions
      .pipe(takeUntil(this.destroy$))
      .subscribe(event => {
        if (event?.source instanceof HTMLElement && event.source.tagName === 'MAT-OPTION') {
          event.preventDefault();
          setTimeout(() => this.autocompleteTrigger.openPanel());
        }
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

之前方法失效的原因 #

• 直接使用MatAutocompleteTrigger程序化控制时，若未精准拦截关闭触发时机，容易出现面板闪烁或逻辑冲突。
• 全局调用$event.stopPropagation()未区分checkbox和option的事件，导致checkbox选中逻辑或其他交互受影响。

内容的提问来源于stack exchange，提问作者JipVeerbeek