如何在Angular Material的mat-select选中后移除mat-form-field焦点？

Angular Material的mat-select在触发ngModelChange时，组件内部的焦点逻辑会干扰常规的失焦操作，直接调用blur往往会被组件自身的焦点重置覆盖。下面给你两个可行的解决办法：

方案一：延迟执行失焦操作 #

借助setTimeout延迟处理焦点，等组件内部的下拉关闭逻辑完成后再执行blur，同时结合ChangeDetectorRef确保视图状态更新：

组件代码 #

import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  selectedStyle: any;
  styles = [/* 你的选项数据，比如 {value: '1', viewValue: '样式1'} */];
  
  @ViewChild('myFormField') myFormField!: ElementRef;

  constructor(private cdr: ChangeDetectorRef) {}

  onStyleChange(event: any) {
    // 先处理你的业务逻辑
    this.selectedStyle = event;
    
    // 触发变更检测，同步视图状态
    this.cdr.detectChanges();
    
    // 延迟100ms执行失焦，避开组件内部的焦点重置
    setTimeout(() => {
      const focusedElem = this.myFormField.nativeElement.querySelector(':focus');
      if (focusedElem) {
        (focusedElem as HTMLElement).blur();
      }
    }, 100);
  }
}

方案二：监听下拉面板关闭事件 #

通过MatSelect的closed事件，确保下拉面板完全关闭后再执行失焦操作：

组件代码 #

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  selectedStyle: any;
  styles = [/* 你的选项数据 */];
  
  @ViewChild(MatSelect) matSelect!: MatSelect;

  onStyleChange(event: any) {
    this.selectedStyle = event;
    
    // 监听下拉关闭事件，关闭后立即失焦
    this.matSelect.closed.subscribe(() => {
      this.matSelect.blur();
    });
  }
}

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

ngModelChange触发时，mat-select的下拉面板还在关闭流程中，组件内部会自动把焦点重新设置到选择器元素上，导致你之前调用的blur操作直接被覆盖。延迟执行或者监听closed事件，能确保在组件内部的焦点处理完成后再执行你的操作，从而生效。

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