How to lose focus on input-text when mouseleave is triggered

Question

My question is, how to lose focus when mouseleave event is triggered. The flow is as follows:

• Click input-text;
• Write something;
• Leave the input-text (with mouse)
• Input-text looses focus, meaning if you type something it will not update the value inside the text-box;

 <input ng-mouseover="$root.gridOptionsForReportErrors.filterFocus()" ng-mouseleave="$root.gridOptionsForReportErrors.filterBlur()" ng-click="$root.gridOptionsForReportErrors.filterFocus()" type="text" class="ui-grid-filter-input ui-grid-filter-input-0 ng-empty ng-touched" ng-model="colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}" aria-label="Filter for column" placeholder=""> 

In the code above $root.gridOptionsForReportErrors.filterBlur() function is triggered successfully in Chrome as in IE.

But the input-text remains selected in Chrome and in IE the input-text looses focus, as expected.

Answer 1

I found one fix for this:

1. I gave an id to the input-box (the one which is posted) id="inputvalerror"
2. and in the fliterBlur function, I searched for this input-box element by the id and called the blur function

like this:

$('#inputvalerror').blur();