Hello,
I've come across what appears to be an issue in the open function of the ui-dialog that mainly affects IE, tested with IE 8 and FF 3.6. If the contents of the ui-dialog-content div is complex, has hundreds or thousands of html elements, such as with a complex <table> structure, the following selector performs very poorly,
...
$.widget("ui.dialog", {
...
open: function() {
...
$(self.element.find(':tabbable').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
uiDialog.get()))).eq(0).focus();
Often times it triggers IE's script taking too long warning. By added a ':first' to the first two selectors the performance was almost double but still poor, in my specific instance taking the selector run time from 12 seconds to 5 seconds. So what appears to be a better performing selector is
$(self.element.find(':tabbable
:first').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable
:first').get().concat(
uiDialog.get()))).eq(0).focus();
While better, this selector is still introducing a significant processing lag when opening a complex dialog instance.
I'm not sure what a good final solution would be. One can say that the dialog class was not intended to be used with complex content. On the other hand, this is the only section of the widget that has seems to have a scaling issue with the size/complexity of the dialogs content. One possible solution might be to have an override for the first tabbable item selector so a custom selector could be used when needed.
Has anyone else run into an issue like this, or come up with a general solution?
Thanks,
Robert