Angular Material Select首次按键无法滚动至匹配选项问题

我之前也碰到过这个Angular Material Select的小坑！首次按字符没法定位到匹配选项，第二次就正常，确实挺影响用户体验的。这个问题大概率是因为首次打开下拉面板时，选项容器还没正确获取焦点，导致按键事件没有被组件的内置逻辑捕获处理。下面是几个亲测有效的解决方法：

方法一：手动在下拉面板打开时设置焦点 #

通过ViewChild获取MatSelect实例，监听它的opened事件，手动把焦点设置到下拉选项的滚动容器上，让组件能正确响应按键：

import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  @ViewChild(MatSelect) select!: MatSelect;

  onSelectOpened() {
    // 加个小延迟确保面板已经渲染完成
    setTimeout(() => {
      const panelElement = this.select.panel?.nativeElement;
      if (panelElement) {
        const optionsContainer = panelElement.querySelector('.mat-select-panel-content');
        optionsContainer?.focus();
      }
    }, 100);
  }
}

对应的模板绑定opened事件：

<mat-select (opened)="onSelectOpened()">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

方法二：自定义按键匹配与滚动逻辑 #

如果方法一不生效，可以手动监听按键事件，自己实现匹配和滚动逻辑，完全掌控行为：

import { Component, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  @ViewChild(MatSelect) select!: MatSelect;
  options = [/* 你的长选项列表，结构比如 {value: any, label: string} */];

  handleKeyDown(event: KeyboardEvent) {
    if (!this.select.opened) return;

    const pressedKey = event.key.toLowerCase();
    // 找到第一个首字符匹配的选项
    const targetOption = this.options.find(opt => 
      opt.label.toLowerCase().startsWith(pressedKey)
    );

    if (targetOption) {
      // 定位到对应选项元素并滚动
      const optionElement = document.querySelector(
        `mat-option[value="${targetOption.value}"]`
      );
      optionElement?.scrollIntoView({ block: 'start', behavior: 'auto' });
      // 可选：自动选中该选项
      this.select.value = targetOption.value;
    }
  }
}

模板绑定keydown事件：

<mat-select (keydown)="handleKeyDown($event)">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

额外提示 #

• 先检查你的Angular Material版本，旧版本（比如14及以下）存在这个已知Bug，升级到最新稳定版（15+）可能直接解决问题，不用写额外代码。
• 如果自定义了下拉面板的样式，别覆盖mat-select-panel-content的默认焦点样式，否则焦点无法正常获取，按键逻辑还是会失效。

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