Why does my jQuery UI Dialog lose the focus when it finishes the open effect?

Question

I'm using jQuery UI Dialog for adding some news to my site. Every time I click add news button, the dialog should open with the text area. Actually, I'm using ckeditor replacing the textarea and it happens that I can't type inside the text editor due to focus issue (at least I think this is the problem).

Check it out. As just as I click add news button the dialog start to open with its effect. Notice the yellow bordered textarea meaning that it's focused (using Chrome) while it's appearing. Click to zoom

Notice then that when the dialog finishes appearing, it isn't focused anymore and I'm having trouble because of this

Click to zoom

Also, check my code http://jsfiddle.net/pzHr2/

Answer 1

It's not a very well documented (tremendous understatement) feature that you can pass an object just as you can to the .show() UI method like this in your options:

show:{ effect: 'slide', complete: function() { $("textarea").first().focus(); }},

This runs the .focus() when the animation completes, you can give it a try here. If you're curious as to why this works, you can take a look here.

Note: this answer is for jQuery UI 1.8.4+ (since you're using .button()), it won't work for 1.7.x users.