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>

Spitler

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

Hurried

This doesn't work when we click outside without selecting anything. By setting skip-focusser="true" it will work on both scenarios. – Stringent

Answer 2

As of version v0.14.9 you can set skip-focusser to true to skip the focusser after selecting an item.

Manciple

Answer 3

Following worked for me;

$timeout(function() {
    angular.element(document.activeElement).blur();
});

or

$timeout(function() {
    angular.element($document[0].activeElement).blur();
});

Greeneyed