求助：Angular Mat Select同时显示键盘焦点与鼠标悬停焦点问题

DevOps 小满

2026-7-14

解决Angular Mat Select未设初始值时双焦点问题

当Mat Select未设置初始值时，Angular会自动聚焦首个可用选项，导致界面同时出现首个选项的焦点和鼠标悬停选项的双焦点状态，很容易让用户困惑。网上很多解决方案要么冗余复杂，还不符合无障碍标准，这里分享一个简洁合规的处理方式。

符合无障碍标准的解决方案

不需要复杂的DOM操作，直接基于Angular Material的API就能解决：

组件内快速处理
在组件里通过ViewChild获取MatSelect实例，监听面板打开事件，把焦点重置回触发器：

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;

  ngAfterViewInit() {
    this.select.opened.subscribe(() => {
      // 延迟执行确保面板已渲染完成
      setTimeout(() => {
        this.select.trigger.focus();
      }, 0);
    });
  }
}

封装通用指令（推荐复用）
如果多个页面都有这个需求，封装成指令更高效：

import { Directive, Host, OnInit } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Directive({
  selector: '[matSelectPreventAutoFocus]'
})
export class MatSelectPreventAutoFocusDirective implements OnInit {
  constructor(@Host() private select: MatSelect) {}

  ngOnInit() {
    this.select.opened.subscribe(() => {
      setTimeout(() => {
        this.select.trigger.focus();
      }, 0);
    });
  }
}

模板里直接添加指令即可：

<mat-select matSelectPreventAutoFocus placeholder="请选择">
  <mat-option value="1">选项1</mat-option>
  <mat-option value="2">选项2</mat-option>
</mat-select>