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

Issue

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.

Solution

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();

Answered By - aurelius