Save on (focusout) with angular mat-autocomplete

Question

I have a simple input with autocomplete

<input [matAutocomplete]="auto" (focusout)="save()">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

I want to save the input value when the user is no longer using the input field

The issue is when i am clicking on a autocomplete option focusout function of input field is called.

What are my options to save input value which checks both autocomplete and input field status

Thankyou

Answer 1

If you ONLY want to handle the clicking on autocomplete option you should use (click) on that option to handle it.

<input [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option (click)="save(number)" *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

However, if you want to do it with focus, this will work:

<input #myInput (focusout)="save(myInput.value)" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
   <mat-option *ngFor="let number of numbers" [value]="number">
     {{number}}
   </mat-option>
</mat-autocomplete>

Stackblitz