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: http://jqueryui.com/demos/dialog/#modal-form

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!