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

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 Chr开发者_运维技巧ome) while it's appearing.

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

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

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.