Angular中mat-select组件keypress事件无法触发调用方法问题

核心原因 #

• Angular Material的mat-select组件内部默认封装了完整的键盘交互逻辑，会拦截键盘事件用于自身的选项导航（上下箭头切换选项、回车确认选中、ESC关闭下拉面板），阻止了原生keypress事件冒泡到用户绑定的mat-option节点上。
• keypress事件本身存在浏览器兼容性问题，对回车、方向键等功能键的识别支持度低，当前规范已更推荐使用keydown/keyup事件替换。
• mat-option默认不是可聚焦元素，mat-select的下拉面板由CDK Overlay生成，焦点逻辑完全由组件内部控制，不会将焦点落到用户绑定事件的mat-option原生DOM节点上，自然无法触发绑定的键盘事件。

推荐实现方案 #

无需单独给每个mat-option绑定键盘事件，直接使用mat-select自带的selectionChange事件即可，该事件会在鼠标点击选中、键盘回车选中两种场景下都触发，完全覆盖需求：

<mat-form-field appearance="legacy">
  <mat-select 
    role="listbox" 
    placeholder="Start time" 
    [disabled]="isEventAllday" 
    [value]="startTime.displayVal"
    (selectionChange)="handleSelectChange($event)"
  >
    <mat-option 
      role="option" 
      required 
      *ngFor="let time of timeVals, let i = index"
      [value]="{data: time, idx: i}"
    >
      {{time.displayVal}}
    </mat-option>
  </mat-select>
</mat-form-field>

对应的TS逻辑：

import { MatSelectChange } from '@angular/material/select';

// 省略组件类其他代码
handleSelectChange(event: MatSelectChange) {
  const { data: time, idx: i } = event.value;
  this.startTimeSelected(time, i);
}

自定义键盘逻辑的特殊场景 #

如果确实需要自定义特殊键盘交互（比如按空格触发自定义逻辑），可以给mat-select绑定keydown事件，配合组件实例获取当前激活的选项处理：

<mat-select 
  #selectRef
  (keydown)="customKeyHandler($event, selectRef)"
  <!-- 其他属性省略 -->
>
<!-- 选项省略 -->
</mat-select>

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