Jqueryui dialog cannot `select ()` input in firefox 11

Question

I run this code on Firefox 11 on Windows 7. (See http://jsfiddle.net/QStkd/ ).

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

The input value is not selected, which does in Chrome and IE, it also does not work if I manually call the select() method.

Is this a known issue? Is there any way to choose it? Timers work , but if I press run on jsfiddle after loading, it no longer works.

Answer 1

It looks like calling focus() (which jquery-ui uses the first tabbable element by default) in Chrome (cannot test IE - on OS X) focuses the field and selects the text in the field.

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 place the cursor in the field when the focus is invoked. Therefore, you must invoke an implicit select call after the dialog has been created to achieve what you want to do.

If you reload the timer script (as opposed to clicking), you will notice that the example works every time. I think jsFiddle is actually the culprit here (maybe a hashchange event or some kind of focal event on one of the panels after clicking the "run" button - I didn’t dig that deep).

EDIT : (sorry, this is late) It seems the main cause of the “problem” is Firefox. I'm not sure if this is a designed behavior or not, but from what I see, it seems that Firefox will not allow you to select text in two different input elements in different areas of content simultaneously on the same page. This does not seem to affect Chrome (and, presumably, IE9).

I made a quick example locally that has two iframes side by side (let me call them left and right). There is a text box on the left and your jquery-ui dialog is on the right, similar to the script 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 combine them and see the result in Firefox, you will notice that the input is focused and selected until the text area in the left is focused. I suspect something like this is happening in jsFiddle.

Answer 2

Try using the open ui dialog event. This event is fired when a 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/

Answer 3

This is the FF problem in dom, determining if you installed DOCTYPE . There is no better way to fix this; a focus timer tends to be “cracked.” However, there is one more step if your Doctype is set to w3 xhtml standards, you can use this to select it in focus. Add onfocus="this.select();" as a property of your input, so that when it is focused, it will be immediately selected.