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

I have an autocomplete form component in my application. In the input area, I have included a custom button like this :

<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>

So when I click on the custom matTooltip button in the span, the autocomplete dropdown gets triggered. I want to stop the dropdown getting triggered when I click the matTooltip button. How do I achieve this?

CodePudding user response：

Did you try it like this?

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