Angular mat-select带搜索下拉框空格输入触发选中问题求助

问题原因 #

Angular Material的<mat-select>组件默认会捕获空格键事件，用来选中当前高亮的选项，这就导致内部搜索输入框无法接收空格输入。

解决方案 #

通过以下修改即可解决：

• 阻止<mat-select>捕获空格键事件，让空格能传递给内部的搜索输入框
• 修正代码中<mat-option>的闭合标签错误（原代码里的闭合标签写成了开始标签，会导致DOM结构异常）

修改后的代码 #

<mat-select (keydown.space)="$event.stopPropagation()">
  <input 
    class="searchBox" 
    placeholder=" Search Here" 
    (input)="searchText($event);"
    (click)="$event.stopPropagation()"
  >
  <mat-option *ngFor="let each of listItems" [value]="each.name">
    {{each.name}}
  </mat-option>
</mat-select>

改动说明 #

1. (keydown.space)="$event.stopPropagation()"：在<mat-select>上绑定该事件，按下空格键时阻止事件向上冒泡，<mat-select>就不会触发选中选项的逻辑，空格会被输入框正常接收。
2. (click)="$event.stopPropagation()"：添加点击事件阻止冒泡，确保点击搜索框时，<mat-select>不会触发下拉菜单状态切换，输入框能正常获取焦点。
3. 修正<mat-option>的闭合标签，保证DOM结构正确，避免潜在渲染问题。

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