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

Nivin Rai picture Nivin Rai · Feb 25, 2016 · Viewed 9k times · Source

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

user2390449 picture user2390449 · Feb 25, 2016

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