如何让Angular mat-autocomplete组件选中选项时失去焦点？

针对选中Mat-Autocomplete选项后，Mat-Form-Field始终保留mat-focused类无法移除的问题，可以通过以下几种方式强制让组件失去焦点：

1. 直接操作输入框和表单域DOM #

在组件类中通过ViewChild获取模板里的输入框和Mat-Form-Field引用，然后在选项选中的回调里执行失焦和移除类的操作：

组件类代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatFormField } from '@angular/material/form-field';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChild('elementInput') elementInput!: ElementRef<HTMLInputElement>;
  @ViewChild('matFormField') matFormField!: MatFormField;

  unFocusOnSearchControl(selectedValue: any) {
    // 让输入框失去焦点
    this.elementInput.nativeElement.blur();
    // 手动移除mat-form-field的mat-focused类
    this.matFormField._elementRef.nativeElement.classList.remove('mat-focused');
  }
}

2. 使用Renderer2进行安全DOM操作 #

如果更倾向于Angular推荐的DOM操作方式，可以用Renderer2来移除类：

组件类代码：

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { MatFormField } from '@angular/material/form-field';

@Component({
  // 你的组件元数据
})
export class YourComponent {
  @ViewChild('elementInput') elementInput!: ElementRef<HTMLInputElement>;
  @ViewChild('matFormField') matFormField!: MatFormField;

  constructor(private renderer: Renderer2) {}

  unFocusOnSearchControl(selectedValue: any) {
    this.elementInput.nativeElement.blur();
    // 用Renderer2移除类
    this.renderer.removeClass(this.matFormField._elementRef.nativeElement, 'mat-focused');
  }
}

3. 延迟执行解决类重新添加问题 #

部分场景下，Angular Material会在选项选中事件后自动重新添加mat-focused类，这时候可以加个短延迟确保操作生效：

unFocusOnSearchControl(selectedValue: any) {
  setTimeout(() => {
    this.elementInput.nativeElement.blur();
    this.matFormField._elementRef.nativeElement.classList.remove('mat-focused');
  }, 100);
}

注意事项 #

• 直接访问_elementRef属于操作Material组件的内部属性，虽然能快速解决问题，但需要注意Angular Material版本更新可能带来的兼容性变化。
• 若使用表单驱动的组件，也可以尝试重置表单控件状态，但该方式可能影响表单验证逻辑，需根据实际场景选择。

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