ng-blur don't fire event on firefox with input number

Question

I am trying to use ng-blur with an html input (type=number) element on firefox.

The problem I found is that when using the up and down arrows of the input number neither the blur nor the focus events are fired with firefox whereas with chrome works fine.

You can reproduce the issue in http://jsfiddle.net/chonw54e/

<div ng-app ng-init="focus=false;blur=false;active=false">
    <input type="number" ng-class="{ myFocus: focus, myBlur: blur }"    ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
    <p>focus: {{focus}}</p>
    <p>blur: {{blur}} </p>
</div>

Just load the page (with both firefox and chrome) and click on the up/down arrows of the html input number

input number

What am I doing wrong?

Thanks for the help!

EDIT: 11/12/2015

@Arg0n's solution fix the problem. However, it looks like a problem of either firefox or angularjs.

I have just created an issue on angular github here

It is not an angular problem. It is due to the firefox's event behaviour which don't focus the input when clicking the arrows inside the input (which in my opinion is a mistake).

EDIT: 14/12/2015

Firefox Issue created in bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1232233

Answer 1

You can fix this with jQuery, see this fiddle:

JavaScript

$(function(){
  $("input[type='number']").on("click", function(){
    $(this).focus();
  });
});

Without jQuery, see this:

JavaScript

document.onreadystatechange = function() {
  if (document.readyState == "complete") {
    var inputs = document.querySelectorAll('[type="number"]');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = function() {
        this.focus();
      }
    }
  }
}

This will force the browser to focus on the input when it's clicked. (Input with type set to number).

Answer 2

A simple onclick="this.focus();" will work as nicely and much simpler if you have one field or using Angularjs's ng-repeat.