Setting focus in tab change

I want to be able to set the focus to the first field whenever the user switches tabe – i.e. clicks on a new existing tab. I’ve tried different things but nothing seems to work. The last thing I did was attach the following script to the ActiveTabChange event:

function tabInquiry_ActiveTabChange(webTab, currentTab) {
var textbox = null;
var tabs = webTab.get_tabs();
switch (currentTab.get_tabIndex())
{
case 0:
textbox = document.getElementById(GetClientId(‘txtKey1’));
break;
case 1:
var textbox = null;
textbox = document.getElementById(GetClientId(‘txtKey2’));
break;
case 2:
var textbox = null;
textbox = document.getElementById(GetClientId(‘txtKey3’));
break;
case 3:
var textbox = null;
textbox = document.getElementById(GetClientId(‘txtKey4’));
break;
default:
break;
}
if (textbox != null) {
textbox.select();
textbox.setActive();
try {
textbox.focus();
}
catch (err) {
}

textbox.click();
}
}

The weird thing is that when I change tabs, the ActiveTabChange event gets invoked four times. I assume it is getting activated during the deactivation of the current tab and the activation of the new tab. There doesn’t seem to be a way to determine which event is being processed from the parameters that I can see.

There is a sore lack of documentation or info on this particular event and/or the parameters it uses. So what can I use/do during the activation of a new tab to set the focus to whatever field I want on that tab’s content page?

P.S. The reason I have the textbox.focus() in a try…catch block is that it never seems to work – always gives an error message.

Any help/code appreciated. Thanks.

/Tom

Hi Tom,

If you process ActiveTabChange event, then you should not interupt normal flow of browser's focus (do not set focus to another element, use alert, etc). Because, result can be unpredictable or break control.

You also can not use that event to set focus to a child in "active" tab, because that tab can be unselected, so its content will be hidden and and browser on invisibleField.focus() will raise exception.

If you need to set focus to field on selected tab straight after selection, then you should process SelectedIndexChanged. To find child element of tab, you may use findChild member method of TabItem. Below I wrote example for you.

<script type="text/javascript">
function tabChanged(webTab, evtArgs)
{
 var id = evtArgs.get_tabIndex();
 //var id = webTab.get_selectedIndex();
 if(id < 0)
  return;
 var tab = webTab.get_tabs()[id];
 var field = null;
 if(id == 0)
 {
  field = tab.findChild('TextBox1');
  //field = $get('<%=TextBox1.ClientID%>');
  //field = document.getElementById('<%=TextBox1.ClientID%>');
 }
 if(id == 1)
  field = tab.findChild('TextBox2');
 if(!field)
  return;
 try
 {
  field.focus();
 }
 catch(ex){}
}
</script>
<ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="300px">
  <ClientEvents SelectedIndexChanged="tabChanged" />
   <tabs>
            <ig:ContentTabItem runat="server" Text="Tab 1">
             <Template>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
             </Template>
            </ig:ContentTabItem>
            <ig:ContentTabItem runat="server" Text="Tab 2">
             <Template>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
             </Template>
            </ig:ContentTabItem>
   </tabs>
</ig:WebTab>

Viktor,

Your code does work – partially. The top part works great at finding the tab, and getting the field I want to set focus to. But doing a field.focus() doesn't work and causes catches with the following error:

    description: "'$lineinfo' is undefined"
    message: "'$lineinfo' is undefined"
    name: "TypeError"
    number: -2146823279

I even tried doing a field.select() then field.setActive() and even a field.click() – which does not error out but it doesn't set the focus to the selected textbox either. In fact the focus never gets set at all – seems like nothing I do sets the focus to the textbox in the selected tab. There seems to be something in the WebTab that is causing the focus to not take. Any ideas?

/Tom

Hi Tom,

If field is found, but focus does not work, then you probably have EnableActivation="true". The logic of WebTab first changes selection, and if activation is enabled, then it sets active tab, so activation event is raised after selection-change event. Activation change sets focus to internal "input" which manages focus and keyboard.

If it the case, then you should call yourField.focus() with delay. Below is example to emplement:

var focusElem = null;
function tabChanged(webTab, evtArgs)
{
 …
 if(!field)
  return;
 focusElem = field;
 window.setTimeout('try{focusElem.focus();}catch(ex){}', 1);
}

Viktor,

Wow! That worked! It seems kinda strange that you have to do this after a delay, but at least it works.

Now, the only thing left is to set the focus to the appropriate tab field when the form is first displayed; i.e. when the form is first brought up (not a postback) how can we set the tab field focus then? In my code behind I set the focus to the WebTab? Or do I set it to the text field in the first tab? Or does this also have to be handled via JavaScript?

I would seriously suggest that you guys add an additional parameter to each tab that specifies the 'focus' field – and then have your code internally attempt to set the focus to that field when you build and switch the tabs. That way it is more consistent and developers don't have to set up this code themselves. I really believe it should be an integral part of the WebTab itself.

Anyway, if you can tell me how to get the focus set to a field inside a tab when the form/WebTab is first displayed then I will be all set. Thanks for you help!

/Tom

Hi Tom,

Viktors solution can work for setting the focus when the WebTeb is first displayed also.

This can be done in server side Page_Load event by registering a client script block and using a delay.

For example to set focus to TextBox1:

 string id = this.TextBox1.ClientID;
 string js = "window.setTimeout(\"try { document.getElementById('" + id + "').focus(); } catch(e){}\", 1000);";
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "TabFocusKey", js, true);

 

Thanks,
Valerie