How to set focus in angular md-autocomplete?

Question

I have a dialog with several fields for installation, the first field is md-autocomplete, when I click ok, all these fields are cleared, so I want to set the focus to true in md-autocomplete to start filling in the data again.

Answer 1

Try the following:

JS:

$scope.setFocus=function(){ setTimeout(function(){ document.querySelector('#autoCompleteId').focus(); },0); } 

HTML:

  <md-autocomplete .............. md-input-id="autoCompleteId" > <!-- Note the id --> </md-autocomplete> <input type="button" value="clickMeForFocus" ng-click="setFocus()" /> 

A timeout is required to ensure that the autocomplete component is displayed during a focus call.

Answer 2

This can be done by adding an attribute.

mdc autofocus

example:

 <md-autocomplete md-autofocus md-selected-item="selectedItem" md-search-text="searchText" md-items="item in getMatches(searchText)" md-item-text="item.display"> <span md-highlight-text="searchText">{{item.display}}</span> </md-autocomplete> 

ref: here

Sincerely.