jQuery UI Dialog steals focus

Question

Hi

I have a jQuery UI dialog which hosts a number of buttons.

I would like to have keyboard control (tab-navigation) on these buttons, so on the open event handler for the dialog, I set the first button to focused.

I can visibly see this works, and also verify it using document.activeElement, but the focus is then stolen and something else gets focus.

By this time, I don't know how I'm supposed to see what has focus as I don't have any further hooks.

Has anyone else noticed a similar problem?

In case you're interested, my code is this (amended to add Focus as described below)

in doc.ready - note I've also added jQuery Buttons to it - but they don't seem to respond to keyboard events AT ALL - but that's a separate question.

        $("#dialogSearchType").dialog
        (
            {
                bgiframe: true,
                height: 180,
                width: 350,
                modal: true,
                autoOpen: false,
                show: 'drop',
                hide: 'fold',
                buttons: { "Street": function() { HandleSearchStreetClick(); $(this).dialog("close"); },
                    "Property": function() { HandleSearchPropertyClick(); $(this).dialog("close"); }
                },
                focus: function(event, ui) { $("#btnSearchTypeProperty").focus(); }
            }
        );


    <div id="dialogSearchType" class="searchDialog" style="width: 280px; display: none" title="Search For..." onkeyup="HandleSearchTypeDialogKeyUp(event)">
        <span>What would you like to search for?</span>
        <br />                
                     <input type="button" tabindex="1" id="btnSearchTypeStreet" class="button" value="Street" onclick="HandleDialogSearchStreetClick()" />
        <input type="button" tabindex="2" id="btnSearchTypeProperty" class="button" value="Property" />           

    </div>

As you can see I've tried adding event handlers along the way, but nothing happens!

Answer 1

Try using the focus event handler instead of the open event handler and see if that helps. I think it's probably more correct since, unless the dialog is modal, you probably want the default button to get focus each time the dialog gets focus anyway, not just when it opens. If that doesn't work, then I'd suggest you add the code to your question.

Answer 2

Okay, I see what the problem was.

The dialog is set as Modal.

jQuery will be intercepting the keyboard events at the document level, and cancelling them.

I think that sucks, so am trying a workaround to destroy this event handler and add my own.

PS If anyone knows how to do this off the top of their head, let me know!