ui-state-focus class not being removed from JQuery UI tab when changing active tab programatically

Question

I'm using jquery hotkeys plugin and binding a keydown press to my JQuery UI tabs like so:

$(document).bind('keydown', '2', function (evt){ 
    $("#TabsID").tabs("option", "active", 1); 
    return false; 
});`

The problem is that if I click on a tab and then use a keydown to select another tab, the previous tab is still being styled by ui-state-focus like so:

<li class="ui-state-default ui-corner-top ui-state-focus" role="tab" 
    tabindex="-1" aria-controls="foo" aria-labelledby="ui-id-5" 
    aria-selected="false">
    <a href="#foo" class="ui-tabs-anchor" role="presentation" tabindex="-1" 
        id="ui-id-5">
        Foo text
    </a>
</li>

It stays this way until I've clicked somewhere else. I'm using jQuery UI 1.10.3, jQuery 2.0.1 and jQuery Hotkeys 0.8.

What I've done to solve it for now is put this inside of all of my keydown binds

$("#foo").find("li.ui-state-focus").removeClass('ui-state-focus');

But I'm wondering if there's a better solution.

Answer 1

After some testing, I think removing the class is the best way to go, no need to write more code for this simple task, this should work perfectly:

$(document).bind('keydown', '2', function (evt){

  $("#tabs").find("li.ui-state-active").removeClass('ui-state-active'); $( "#tabs" ).tabs( "option", "active", 2 ); return false; });