.shake() fires blur event

This is my html:

<div><input/></div>

and this is my jQuery:

$('input').focus();
$('input').blur(function () { console.log('BLU开发者_如何学PythonR!'); });
$('div').effect('shake');

Please see http://jsfiddle.net/kN7tr/

Somehow the shake effect fires the blur event. That is really annoying. Any suggestions?

EDIT: The following situation is similar http://jsfiddle.net/kN7tr/1/

---

After some digging, it looks like this is the culprit http://bugs.jqueryui.com/ticket/7595

This was the fix:

// Fixes #7595 - Elements lose focus when wrapped.
if ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) {
    $( active ).focus();
}

(which is on line 4425 of 1.8.16 if you're interested - the comment is misleading as it's talking about a decorator (has nothing to do with text wrapping or anything))

Fiddle has 1.8.14, which the bug was reported against.

This fix is available as in 1.8.16, which is available on Google CDN (and obviously if you downloaded the latest)

---

You can set the focus back to input after shake animation is complete

$('div').effect('shake', function(){
    $('input').focus();
});

Worrking demo

The work around for this is to attach the blur event inside the shake callback and also set the focus there. I really don't understand why the focus is going away thats why the blur is firing. I hope this work around helps you.

Working demo

$('input').effect('shake', function(){
    $('input').focus();
    $('input').blur(function () { console.log('BLUR!');
    });
});

---

Live Demo

var $focusElement;

// Keep track of the element that was focused
$(":input").focus(function () {
     $focusElement = $(this);
});

$('input').focus();
$('input').blur(function () { console.log('BLUR!');
});

$('div').effect('shake', function(){
        // Refocus the element
        $focusElement.focus();
    });

Ugly hack that was also posted Shake effect kills focus where it was determined this was a bug.