Angular 8 Material MatAutocomplete 点击自定义按钮阻止下拉框触发问题

点击info按钮时，事件会向上冒泡触发input输入框的focus事件，而mat-autocomplete默认会在输入框获取焦点时弹出下拉面板，所以会出现你遇到的问题。

推荐直接在按钮的事件里拦截冒泡，优先用第一种方案即可解决绝大多数场景的问题：

方案1：阻止mousedown事件冒泡 #

点击事件的触发顺序为mousedown -> focus -> mouseup -> click，仅在click事件里阻止冒泡无法拦截更早触发的focus事件，所以需要额外拦截mousedown事件：
修改你的<i>标签代码如下即可：

<i class="fal fa-info-circle" aria-hidden="true" 
   (click)="tooltip.toggle(); $event.stopPropagation();"
   (mousedown)="$event.stopPropagation(); $event.preventDefault();"
></i>

方案2：通过临时标记控制面板弹出 #

如果因为组件嵌套层级等原因方案1不生效，可以通过临时变量控制autocomplete面板的弹出逻辑：

1. 首先在组件类中添加临时变量：

// 组件类中添加
disableAutoOpen = false;

2. 修改模板对应代码：

<i class="fal fa-info-circle" aria-hidden="true" 
   (mousedown)="disableAutoOpen = true"
   (click)="tooltip.toggle(); setTimeout(() => disableAutoOpen = false, 100);"
></i>

<!-- 修改mat-autocomplete标签，添加opened事件处理 -->
<mat-autocomplete #auto="matAutocomplete" [displayWith]="handler()" (opened)="disableAutoOpen && auto.closePanel()">
    <!-- 原有option代码保持不变 -->
    <mat-option *ngFor="let option of suggestions | async" [value]="option.id">
        {{option.title}}
    </mat-option>
</mat-autocomplete>

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