Angular Material: md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?

Question

I have md-autocomplete:

Answer 1

If you don't mind losing focus on the md-autocomplete input element on enter, you can close md-autocomplete suggestions without using hacky ways that involve messing with the internal $mdAutocompleteCtrl controller. This depends on md-autocomplete to automatically hide suggestions when the input element is no longer focused.

1. Wrap your md-autocomplete element in a form (or use a directive like ng-enter) and add an ID to the input element using md-input-id

  

    <md-autocomplete md-input-id="autocomplete" ...>
    
  

2. Call blur() on the #autocomplete input element

handleFormSubmit() {
  angular.element(document.querySelector('#autocomplete')).blur();
}