Angular Material: Hide Autocomplete Panel when User hits enter Key

My use case was slightly different so your update didn't work for me, but I found a slightly different solution that does the trick:

@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;

Then you can use this to close the dropdown options:

this.autocomplete.closePanel(); 

Make sure to also import ViewChild:

import { ViewChild } from '@angular/core';

Works like a charm.

This comment provides a solution where you can get a reference to the matAutocompleteTrigger directly on the input element, so that you can call closePanel() within the template. For example:

    <input      type="text"      matInput      #trigger="matAutocompleteTrigger"      (keydown.enter)="$event.target.blur(); trigger.closePanel()"      [formControl]="myControl"      [matAutocomplete]="auto"    />

// This is my solution  ios/android panel not hide on done button virtual // <input type="text" placeholder="{{lbl.TipDoc}}"class="form-control ui-inputtext ui-widget autocomp" #trigautoTipDoc ="matAutocompleteTrigger" aria-label="name" matInput                                        (blur)="OcuPanelAuto(trigautoTipDoc);"formControlName="tipDocLbl" [matAutocomplete]="autoTipDoc" ><mat-autocomplete #autoTipDoc="matAutocomplete" role="combobox"><mat-option  *ngFor="let option of tipDocFiltObs | async"                                                            [value]="option.name"> {{option.name}}</mat-option></mat-autocomplete>OcuPanelAuto(cc: MatAutocompleteTrigger) {        setTimeout(function a() {            cc.closePanel();        }, 130);    }