[SOLVED] tabindex (again)

[dang65]

Hi,

I've searched this forum and found a couple of references to this issue, but they seem like old threads and didn't have any clear solutions anyway.

Problem:

I have a Zimlet with default OK and CANCEL buttons in the footer. In the Zimlet I have a custom form with Username and Password fields.

I want the user to be able to Tab from my Username field to my Password field (and back again with Shift+Tab). The standard HTML tabindex setting doesn't work.

When you hit Tab in either field, focus jumps straight to the default CANCEL button and stays there. Shift+Tab does nothing and Tab does nothing. The same problem appears on other Zimlets.

How can I override this default action and give my own form a standard tabindex?

Thanks!

[dang65]

Anyone able to help with this? I really can't find any reference to a solution in the documentation or on a Google search.

[dang65]

I'm not sure if this got no replies because the solution is considered too obvious, but it did take me a couple of days hunting around and experimenting before I figured out how to do it. And I'm not absolutely certain that what I've done is actually "correct", but it works.

I'll put it on here for anyone else that's searching for the same thing.

As described previously, I have a Zimlet with username and password fields. In fact, these fields are hidden until an option (radio button) is selected on the Zimlet. So, in the Zimlet's javascript file I have a function to show the hidden fields when the radio button is clicked. I added a couple of lines to this function to add the two fields to the existing default tabgroup.

It took me a while to work out where the tabgroup was. Turns out it's stored in the Zimlet dialog object. So, my Zimlet is mailaggr, and the dialog is _aggrDialog. Using Firebug, I can see the existing tabgroup by entering mailaggr._aggrDialog._tabGroup into the console.

So, it's just a case of adding the two fields to this tabgroup (and setting focus on the first field):

mailaggr._aggrDialog._tabGroup.addMember(document.getElementById('mailaggr_username'));
mailaggr._aggrDialog._tabGroup.addMember(document.getElementById('mailaggr_password'));
document.getElementById('mailaggr_username').focus();

The tab key now cycles focus from username > password > OK > Cancel.

I hope that makes sense to anyone else that's not a Zimbra expert and is poking around trying to work this stuff out.