Calling .focus() on a text field during a jquery-ui dialog-with-tabs load breaks the dialog rendering.

Question

If I use

setTimeout(function{$('#myElement').focus()}, 10)`

during the loading of a jquery-ui dialog containing tabs, the rendering of the tabs breaks! Specifically, their background images fail to appear which makes them look like garbage. This ONLY happens when I set a timeout on document ready to focus the first text input in the popup.

This behavior is bizarre. Thoughts?

Note: This only happens in firefox and opera.

Answer 1

Do you get any error?

Are you sure the element is in the dom and visible thus focusable when the function is invoked.

Does increasing the timeout value fix it?

Answer 2

If you're copying your code directly, it could just be that you forgot the () after focus.

setTimeout($('#myElement').focus(), 10);

Answer 3

This smells like a classic concurrency problem to me. You're altering the code while jQuery's working on it, and that's probably breaking some assumption in the code that the state of the DOM will stay stable.

If you want to focus a textfield after the dialog is loaded, the proper way to do it is to put your focus() in a callback method.

Also, do you really mean to wait for 10 milliseconds and then focus()?