Angular技术问询：如何在输入框失焦时仍显示Autocomplete菜单

一、是否有内置配置参数？ #

Angular Material的Autocomplete组件没有直接的内置参数支持输入框失焦时仍显示菜单。它的默认交互逻辑是输入框聚焦时显示面板、失焦时自动关闭。

二、通过TypeScript实现（推荐） #

可以通过手动控制Autocomplete面板的显示状态，绕过默认的失焦关闭逻辑，核心思路是强制管理面板的打开/关闭：

1. 获取组件引用
   在组件类中通过ViewChild获取Autocomplete实例和输入框元素：

import { MatAutocomplete } from '@angular/material/autocomplete';
import { ElementRef, ViewChild } from '@angular/core';

@ViewChild('auto') autocomplete!: MatAutocomplete;
@ViewChild('input') inputElement!: ElementRef<HTMLInputElement>;

2. 拦截失焦事件并强制保持面板打开
   在模板中给输入框绑定blur事件，同时在事件处理方法中手动打开面板：

<input 
  type="text" 
  #input
  [formControl]="myControl" 
  [matAutocomplete]="auto"
  (blur)="keepPanelOpen()"
>
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

组件类中实现处理方法：

keepPanelOpen(): void {
  // 强制打开面板
  this.autocomplete.open();
  // 可选：添加点击选项后的逻辑，避免面板一直锁定
  setTimeout(() => {
    const isOptionClicked = document.querySelector('.mat-option:focus') !== null;
    if (!isOptionClicked) {
      // 非选项区域点击时再关闭，可根据需求调整
      // this.autocomplete.close();
    }
  }, 100);
}

也可以监听面板的closed事件，在特定条件下重新打开：

ngAfterViewInit(): void {
  this.autocomplete.closed.subscribe(() => {
    // 自定义判断条件，比如输入框有值时保持打开
    if (this.myControl.value) {
      this.autocomplete.open();
    }
  });
}

三、通过CSS实现（局限性较大） #

CSS可以强制视觉上显示面板，但无法处理交互逻辑（如点击选项、外部点击关闭），仅适合纯视觉展示场景：

/* 强制显示Autocomplete面板 */
.mat-autocomplete-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 移除默认关闭动画 */
.mat-autocomplete-panel.mat-autocomplete-animating {
  transition: none !important;
}

注意：该方法会让面板始终显示，即使输入框从未聚焦，需结合额外逻辑控制显隐，否则会影响页面交互体验。

四、注意事项 #

• 使用TS方法时，要补充外部点击关闭的逻辑，避免面板长期锁定影响操作
• 可根据业务场景添加判断条件（如输入框有值时才保持显示），避免违背用户交互习惯
• 过度修改默认组件行为需谨慎，确保符合产品的交互设计要求

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