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