jQueryUI .button() remains pressed after opening ui dialog with it in firefox

Question

link for jsfiddle: http://jsfiddle.net/6UWZQ/1

look on this live link, if you click on any row on delete or edit and after click cancel, the button will remain highlighted (only in Firefox)

I make the buttons like this:

$("input[type=submit]").addClass("abtn"); 
$("tbody a").addClass("abtn");
$(".abtn").button();

and I add a confirm dialog for each form by using a css class on the submit button like this:

<script type="text/javascript">
        var currentFormconfirm;
        $(function () {
            $("#dialog-confirm-confirm").dialog({
            show: "drop",
            hide: "fade",
                resizable: false,
                height: 220,
                width: 400,
                modal: true,
                autoOpen: false,
                buttons: {
                    'Yes': function () {
                        $(this).dialog('close');
                        currentFormconfirm.submit();
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                }
            });
            $(".confirm").click(function () {
                currentFormconfirm = $(this).closest('form');
                $("#dialog-confirm-confirm").dialog('open');
                return false;
            });
        });

</script>
<div id="dialog-confirm-confirm" title="Confirm dialog">
    Are you sure you want to delete this foobar ?
</div>

and the form:

<form action="/awesome/foobar/Delete/7" method="post" class="fr">
                    <input type="submit" class="confirm abtn ui-button ui-widget ui-state-default ui-corner-all" value="Delete" role="button" aria-disabled="false">
                    </form>

Answer 1

That seems like a bug in jquery ui 1.8.1. Here's a simplified test case to reproduce the behavior. The problem is that ui-state-focus class is not removed.

Answer 2

since it's a jquery bug, my solution is to do this instead of button():

   $(".abtn")
                .hover(function () { $(this).addClass("ui-state-hover"); },
                    function () { $(this).removeClass("ui-state-hover"); })
                .bind({ 'mousedown mouseup': function () { $(this).toggleClass('ui-state-active'); } })
                .addClass("ui-state-default").addClass("ui-corner-all")
                .bind('mouseleave', function() { $(this).removeClass('ui-state-active') });