Question

I am building a web interface built around jQuery tabs, where the first tab contains a text input that can be used as a quick search through the other tabs. I want the textbox to gain focus as soon as the first tab is selected, so the user can start typing asap.

Currently I’m trying to use the tabsselect event to bind the focus-stealing function, however it seems that I’m missing something.

my current code:

$("#usertabs").tabs().bind("tabsselect",function( event, ui){
    if(ui.index == 0){
        alert('fire');
        $('#barcodeselect').focus();
    }
});

When I click the first tab, the alert pops up, and as soon as I dismiss it, the first tab is shown, however the textbox does not have focus.

Calling $('#barcodeselect').focus(); from a console does have the desired effect, so it shouldn’t be a typo or something like that..

Could it be that the changing of tab steals focus from the textbox? If so, is there a way to bind on the tab change being finished instead of beginning? Or am I just being oblivious?

Answer 1

You should use tabsshow instead of tabsselect.

Tab select happens when the tab is clicked (so that you can cancel the tab change returning false).

Tab show happens when the tab has been finally selected and is displayed.