Cannot set focus to a form field in a jQuery UI dialog on clicking a jQueryUI menu item

Question

I've got a jQuery UI dialog containing a one-field form and the autoOpen property is set to false at the beginning. There's another jQuery UI menu on the page and the dialog's open function is binding to the click event of the menu items. I've been trying to set focus to the only form field of the dialog when the dialog is open on click of the menu items somehow no luck. To pinpoint the cause I also added another test button and by clicking that button I can set focus to the form field. So I'm pretty sure it's the jQuery UI menu that is preventing the focus of the field. I wonder if there's any way that I can circumvent this constraint. Any insight is appreciated. Thanks!

html:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
</ul>
</br>
<button id="btn">Open the dialog</button>

<div id="dialog" title="Basic dialog">
    <form>
        <input type="text" id="fld" />
    </form>
</div>

javascript:

$( "#dialog" ).dialog({
    autoOpen: false,
    open: function(event, ui){
        $('#fld').focus();
    }
});

$('#btn').click(function(e){
    $( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
    $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu({
    select: function( event, ui ) {
        $( "#dialog" ).dialog('open');
    }
});

Here is the js fiddle

Salomo

Answer 1

Interesting.

jQuery's menu is affecting the on focus somehow. I was looking into your fiddle and I found that even if you delay the focus 1 millisecond it works.

Take a look at this.

$( "#dialog" ).dialog({
   autoOpen: false,
   open: function(event, ui){
       setTimeout(function(){$('#fld').focus();},1);
   }
});

$('#btn').click(function(e){
   $( "#dialog" ).dialog('open');
});

$('#menu li a').click(function(){
   $( "#dialog" ).dialog('open');
})

$( "#menu" ).menu();

http://jsfiddle.net/XMEWu/1/

Skivvy

Hi @Trevor, I tested your fiddle out a little bit and it seems every time the page is loaded, the first click on menu items does not set the focus and all the clicks afterwards work perfectly. It's definitely closer to what I want. Appreciate your help. – Salomo

Hi @Trevor, I tested your solution with my real workaround and surprisingly it worked. Cannot see the logic behind that. It's probably because the real workaround is not using the exactly same version of jquery and jquery UI. Anyway thanks for all the help. – Salomo

Your welcome, that's odd on my fiddle it works the first time for me. Go figure. – Skivvy

I was just thinking maybe the speed at which the ui-menu initially loads is different for each computer(depending on processor etc..) You could try setting the timeout to 10 milliseconds instead of 1 millisecond just to be safe. – Skivvy

I have just came upon the same problem today and Trevor's solution worked for me, odd thing is I had to set the timeOut to 10, when I set it to 9 it does't work so seems to be a magic number. Maybe depends on the jquery-ui version? Searching google I found someone fixed it editing the jquery-ui's code and adding a callback during the animation but it's a 6 years old solution. I'm using jquery-ui v 1.11.3 and the issue is still present even though it was reported as a bug over 5 years ago. Only the setTimeOut fix does the job for me so thank you for that. – Strade

If anyone would be interested in the ticket/solution I mentioned it can be found here on jqueryui site: bugs.jqueryui.com/attachment/ticket/4675/ui.dialog.js – Strade

autofocus="autofocus" in input can also be a solution but mozilla has some problems with it, in chrome works without problems though – Strade

Answer 2

This one drove me mad. Here's what fixed it for me (more generic version of @Trevor's answer).

$('#element').dialog({
  open: function () {                        
    //focus fix
    $('textarea, input', $(this)).click(function() {
        var $inp = $(this);
        setTimeout(function () {
            $inp.focus();
        }, 1);
    });                        
  }
});

Molder

Answer 3

Use on Dialog Page

$(window).load(function() {
   //Use Focus as $("#stsr").focus();
}

Eldwun

This is also a good solution. Some explanation: the open event for dialog doesn't "wait" for the html to load, it gets executed as soon as the dialog is opened and that's the real problem here. Adding function on $(window).load or $(document).ready to dialog's html waits until the code is fully loaded before calling the function thus solving the problem of focusing input that doesn't exist yet. I think that this might be even better solution then setting the timeout. – Strade