Friday, January 28, 2011

jQuery UI Dialog and tabindex attributes

Visual controls, like inputs, selects, etc., inside a jQuery UI modal dialog cannot have a tabindex attribute. If you do so, you won't be able to navigate using the TAB key. Simple isn't it?

Want to see for yourself?

1) First, go to the jQuery UI Dialog demo page, using Firefox + Firebug:

2) Click the button "Create new user"

3) Use Firebug to inspect the 3 inputs with id's: "name", "email" and "password". There is no tabindex attribute. Now, use Firebug and add the tabindex attribute with any value to these inputs. Any number like 1, 2, 3 should be ok.

4) Voilá! Once you are done you cannot navigate through the controls using TAB key anymore.

Workaround? Never put tabindex attributes in your HTML elements inside a jQuery UI modal dialog!


Anonymous said...

I was having trouble with this too, and getting strange results, but I wanted to have tab indexes.

I am using a form with multiple tabs (pages) inside a dialog, and found that on some of the pages the tab indexes seemed to be okay, but they were not working as expected on the first page. I realised that jQuery dialog must be using some specific low tab indexes (0, 1?), so I started my own tabIndex values at 100 and everything started working as expected.

Sort of... I found that I then cannot use the tab key to go to my Save and Cancel buttons, but I think I can work around that because I want it to go to the next page anyway, until the last one, and THEN to the buttons - but that's a whole other story.

Anonymous said...

This was very helpful, tnx. :)