如何禁用Angular Material <mat-select>选中后回车展开选项的行为

这个问题我之前也遇到过，mat-select的回车键默认行为确实有点棘手——只调用$event.stopPropagation()通常不够，因为它的展开逻辑是绑定在浏览器默认事件上的，得同时阻止默认行为才能彻底禁用这个展开动作。

下面是具体的解决方案：

步骤1：在mat-select上绑定keydown事件 #

在模板里给你的<mat-select>添加(keydown)事件监听，用来捕获回车键操作：

<mat-select [(value)]="selectedOption" (keydown)="handleSelectKeydown($event)">
  <mat-option value="option1">选项1</mat-option>
  <mat-option value="option2">选项2</mat-option>
  <mat-option value="option3">选项3</mat-option>
</mat-select>
<button (click)="search()">搜索</button>

步骤2：实现事件处理函数 #

在组件类里编写handleSelectKeydown方法，判断如果是回车键，就同时阻止默认行为和事件冒泡，然后触发你的搜索逻辑：

handleSelectKeydown(event: KeyboardEvent) {
  // 只处理回车键
  if (event.key === 'Enter') {
    // 阻止mat-select的默认展开行为
    event.preventDefault();
    // 阻止事件向上冒泡，避免影响其他组件
    event.stopPropagation();
    // 触发你的搜索逻辑
    this.search();
  }
}

为什么之前的方法没用？ #

stopPropagation()只是阻止事件向上传递，但mat-select的展开动作是由浏览器默认事件触发的（比如回车键触发下拉框的toggle），所以必须调用preventDefault()来取消这个默认行为，才能彻底阻止它重新展开。

如果你的场景更复杂（比如需要在用户选中选项后自动触发搜索，同时禁用回车展开），也可以结合selectionChange事件，但上面的方法是最直接针对回车问题的解决方案。

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