How to remove focus from ui-select after selecting an option

Question

I need to remove focus from ui-select input once the user has selected an option using mouse click and on enter start searching. Now what happens is that the focus is still there on select and as a result the dropdown list is opened on clicking enter.

  <ui-select id= "country" ng-model="ctry" name= "country"  theme="bootstrap">
      <ui-select-match >{{text || $select.selected.id}}</ui-select-match>
          <ui-select-choices repeat="countryL in countryLookup | filter: $select.search">
             <div ng-bind-html="countryL.id | highlight: $select.search"></div>
                <small ng-bind-html="countryL.name | highlight: $select.search"></small>
       </ui-select-choices>

Answer 1

Add on-select="onSelected($item)" to your ui-select and in controller:

$scope.onSelected = function (selectedItem) {
    setTimeout(function(){
        $(':focus').blur();
    })
}

or use $timeout in controller