Angular 8 - Material MatAutocomplete - 输入区域中的自定义按钮触发自动完成下拉

Question

我的应用程序中有一个自动完成表单组件。在输入区域中，我包含了一个自定义按钮，如下所示：

<form class="app-autocomplete-form">
    <mat-form-field class="full-width-component">
        <mat-label>Label</mat-label>
        <input matInput [matAutocomplete]="auto" [formControl]="formControl">
        <button mat-button *ngIf="formControl.value" matSuffix mat-icon-button aria-label="Clear" (click)="formControl.reset()">
            <mat-icon>close</mat-icon>
        </button>
        <span style="position:absolute; right:0;"#tooltip="matTooltip" 
              [matTooltipClass] ="'icon-tooltip-style'"
              [matTooltip]="namesList"
              (mouseenter)="$event.stopImmediatePropagation()"
              (mouseleave)="$event.stopImmediatePropagation()">
            <i class="fal fa-info-circle" aria-hidden="true" (click)="tooltip.toggle()"></i>
        </span>
        <mat-autocomplete #auto="matAutocomplete" [displayWith]="handler()">
            <mat-option *ngFor="let option of suggestions | async" [value]="option.id">
                {{option.title}}
            </mat-option>
        </mat-autocomplete>
</mat-form-field>
</form>

因此，当我单击跨度中的自定义 matTooltip 按钮时，会触发自动完成下拉菜单。我想在单击 matTooltip 按钮时停止触发下拉菜单。我该如何实现？

Answer 1

你试过吗？

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

Angular 8 - Material MatAutocomplete - 输入区域中的自定义按钮触发自动完成下拉

Angular 8 - Material MatAutocomplete - Custom Button in input area triggering the autocomplete dropdown

html

css

angular-material

angular