CODEWITHSUNDEEP
htmlangularjsangular-ui-bootstrap
H. Gorodesky
H. Gorodesky

Reputation: 37

ng-blur with uib-typeahead (ui-bootstrap)

   <div class="form-group">
       <label for="Skill1">Skill</label>
       <input type="text"
        ng-model="vm.skill1" 
        name="skill1"
        uib-typeahead="skill for skill in vm.skills | filter:$viewValue"
        class="form-control typeahead"
        ng-blur="vm.checkSkills(vm.skill1)"
        placeholder="" 
        required> 
   </div>

My environment is AngularJs, I'm trying to use ng-blur only when the user leave this field, however due to the typeahead, if I use the mouse to choose an option the typeahead suggest, the ng-blur "think" I left the field and activate the ng-blur just with the first letter I emtered How can I override this?

Upvotes: 3

Views: 543

Answers (2)

Wojciech Zylinski
Wojciech Zylinski

Reputation: 2035

You can simply add some slight delay inside your blur handler, so that it triggers after the onClick handler of uib-typeahead.

You can, for example, use $timeout() with a promise inside your vm.checkSkills method, eg:

$scope.checkSkills = function(skill) {
    $timeout(function() {}, 100).then(function() {
        // your logic
    });
}

Upvotes: 0

Anil Arya
Anil Arya

Reputation: 3110

Instead of using ng-blur, required functionality can be achieved using

typeahead-on-select="checkSkills($item,$model,$label)"

HTML 

<input  type="text"  ng-model="skill1" uib-typeahead="skill for skill in skills | filter:$viewValue" class="form-control typeahead" typeahead-on-select="checkSkills($item,$model,$label)"

JS

$scope.checkSkills = function(item, model, label){ 
   if(model){
      //your validation logic goes here
     // console.log (" Check skill, correctly set ", (item), model , label);
   }

 }

Plunker example : https://plnkr.co/edit/7N8TU2?p=preview

Upvotes: 2

Related Questions