5

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

Trevor
  • 16,080
  • 9
  • 52
  • 83
aarryy
  • 502
  • 5
  • 20

3 Answers3

8

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/

Trevor
  • 16,080
  • 9
  • 52
  • 83
  • 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. – aarryy Oct 02 '13 at 13:47
  • 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. – aarryy Oct 02 '13 at 13:58
  • Your welcome, that's odd on my fiddle it works the first time for me. Go figure. – Trevor Oct 02 '13 at 14:34
  • 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. – Trevor Oct 02 '13 at 14:39
  • 1
    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. –  Jun 22 '15 at 09:28
  • If anyone would be interested in the ticket/solution I mentioned it can be found here on jqueryui site: http://bugs.jqueryui.com/attachment/ticket/4675/ui.dialog.js –  Jun 22 '15 at 09:32
  • autofocus="autofocus" in input can also be a solution but mozilla has some problems with it, in chrome works without problems though –  Jun 22 '15 at 09:55
1

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);
    });                        
  }
});
lamarant
  • 3,243
  • 2
  • 25
  • 30
0

Use on Dialog Page

$(window).load(function() {
   //Use Focus as $("#stsr").focus();
}
AB Shaman
  • 21
  • 12
  • 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. –  Jun 23 '15 at 07:05