Blur() callback is not issued if the focus is changed from form.submit() callback

[alexalex]

Make a simple page with two inputs - #first and #second - and a Submit button:

 <form>
    <input id=first><br>
    <input id=second><br>
    <input type=submit>
  </form>

Then add this:

  $(document).ready(function(){

        $('form').submit(function(){
                $('input#second').focus();
                return false;
        });

        $('#first').blur(function(){
                alert('blur');
        });
  });

Then

• (a) open this page in FF 3.6 on Windows
• (b) click on first input to give it focus
• (c) hit Enter to submit the form

The #second gets the focus, but there is no 'blur' alert.

The demo page - ​http://swapped.cc/tmp/jquery-blur-quirk.html

[snover]

​fiddle test case

So I am not actually sure this is a bug or not so I am leaving it open for review; you should probably be calling the focus function by doing $('input#second')[0].focus() which will ensure the appropriate events are dispatched.

[alexalex]

Haaaa! That does solve the problem, thanks.

However the reason I logged it as a bug was that it was happening on Firefox only, but not on Chrome and IE.

Also, if you have a moment, can you explain how calling focus() on an array with one element is principally different from issuing the call directly for that element? It seems logical to assume that these two cases would yield the same result.

[dmethvin]

I think snover's point was that $().focus() does *two* things. It fires a "focus" event starting on the target element that bubbles up the DOM, and (if no handler returns false or calls preventDefault) calls the element's DOM focus method. In this case you only want the latter, and the former may be interfering.