Angular mat-select移动端点击外部无法关闭问题

我在使用Angular Material的select组件加载可选项时遇到了问题：点击字段能正常展开选项列表，但点击选项区域外的任意位置，select始终无法关闭。这个问题仅出现在移动端，就算在Chrome调试工具切换到手机尺寸也能复现。

组件的HTML代码如下：

<mat-form-field>
    <mat-label>City</mat-label>
    <mat-select formControlName="cityId" (valueChange)="onCityChange($event)">
      <mat-option *ngFor="let city of cities" [value]="city.id">
        {{city.name}}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="form.get('cityId').hasError('required')">
        This field is required
    </mat-error>
</mat-form-field>

以下是几种可行的解决思路：

• 排查全局点击事件的冒泡阻止
  项目中如果有自定义的全局点击监听（比如用于关闭弹窗、侧边栏的逻辑），可能存在调用event.stopPropagation()或event.preventDefault()的代码，这会导致Angular Material内置的点击外部关闭逻辑无法触发。仔细检查这类全局事件处理代码，确保没有阻断必要的事件传递。

• 升级Angular Material与CDK版本
  部分旧版本的Angular Material在移动端的触摸事件处理上存在bug，尤其是Overlay模块的点击外部关闭逻辑。尝试升级到最新稳定版本，执行命令：

  ng update @angular/material @angular/cdk
  

• 手动实现点击外部关闭逻辑
  如果上述方法无效，可以手动添加监听逻辑：给mat-select添加模板引用变量，通过监听document的点击事件，判断点击区域是否在select组件或其下拉面板之外，若满足则调用close方法。

  修改后的HTML代码：

  <mat-form-field>
      <mat-label>City</mat-label>
      <mat-select #citySelect formControlName="cityId" (valueChange)="onCityChange($event)">
        <mat-option *ngFor="let city of cities" [value]="city.id">
          {{city.name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="form.get('cityId').hasError('required')">
          此字段为必填项
      </mat-error>
  </mat-form-field>
  

  组件TS代码补充：

  import { Component, ViewChild, HostListener } from '@angular/core';
  import { MatSelect } from '@angular/material/select';
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponent {
    @ViewChild('citySelect') citySelect: MatSelect;
    private isSelectOpen = false;
  
    ngAfterViewInit() {
      // 监听select的开闭状态
      this.citySelect.openedChange.subscribe(isOpen => {
        this.isSelectOpen = isOpen;
      });
    }
  
    // 监听全局点击事件
    @HostListener('document:click', ['$event'])
    onDocumentClick(event: MouseEvent) {
      if (this.isSelectOpen && this.citySelect.panel) {
        const panelEl = this.citySelect.panel.nativeElement;
        const selectEl = this.citySelect._elementRef.nativeElement;
        // 判断点击位置是否在select和面板之外
        if (!panelEl.contains(event.target as Node) && !selectEl.contains(event.target as Node)) {
          this.citySelect.close();
        }
      }
    }
  }
  

• 检查CDK Overlay的配置
  Angular Material的select依赖CDK的Overlay模块，确保OverlayModule已正确导入，且没有自定义的Overlay配置（比如修改scrollStrategy或positionStrategy）干扰了点击事件的捕获逻辑。

内容的提问来源于stack exchange，提问作者Osama El-Masri