jqueryui dialog not able to `select()` input in firefox 11

Question

I'm running this code in Firefox 11 on Windows 7. (See http://jsfiddle.net/QStkd/).

$('<div><input type="text" value="val" /></div>').dialog();

​ The value in the input isn't selected, which is does do in Chrome and IE, it also doesn't work if I manually call the select() method.

Is this a known problem? Is there any way to select it? Timers work but if I click run on jsfiddle after it loads it doesn't work anymore.

Answer 1

It looks like calling focus() (which jquery-ui does by default to the first tabbable element) on Chrome (can't test IE -- on OS X) focuses the box and selects the text within the box.

Taken from jquery.dialog.ui.js:

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
    uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
        uiDialog.get()))).eq(0).focus();

Firefox, on the other hand, seems to only place the cursor within the box when calling focus. Therefore, you must call implicitly call select after the dialog has been created in order to achieve what you're looking to do.

If you reload your timers fiddle (as opposed to clicking run), you'll notice the example works every time. I think that jsFiddle is actually the culprit here (possibly the hashchange event, or some focus event on one of the panes after you press 'run' -- I haven't dug that deeply).

EDIT: (sorry, it's late) Looks like the root cause of the "problem" is Firefox. Not sure if this is designed behavior or not, but from what I can see, it looks like Firefox will not allow text to be selected in two different input elements within different content panes at the same time on the same page. This doesn't seem to affect Chrome (and, assumingly, IE9).

I made a quick example locally that has two iframes side by side (let's call them left and right). Left contains a textarea, and right contains your jquery-ui dialog -- similar to the fiddle you posted. right has the following code:

<script type="text/javascript">
$('<div><input type="text" value="val" /></div>').dialog();
$('input').select();
</script>

left has the following code:

<script type="text/javascript">
setTimeout( function() {
    $('textarea').focus();
}, 1000);
</script>

If you piece these together and check out the result in Firefox, you'll notice that the input is focused and selected until the textarea in left is focused. I suspect something akin to this is happening in jsFiddle.

Answer 2

Try to use open event of ui dialog. This event is triggered when dialog is opened.

$('<div><input id="yourInput" type="text" value="val" /></div>').dialog({
    open:function(){
     $("#yourInput").focus().select();
    }
        }
)

http://jsfiddle.net/sergeir82/A6Wah/8/

http://jsbin.com/etivej/4/