jQuery UI dialog button focus

Question

When a jQuery UI dialog opens, it selects one of the buttons and highlights it or sets focus to it etc... How can I stop this behaviour so that none of the buttons are highlighted when the dialog opens?

EDIT: I tried the following in the dialog options, which didn't remove focus from the buttons:

...
open:function(event, ui) { $("myunimportantdiv").focus(); },
...

NOTE: As a temporary workaround I modified the CSS for .ui-state-focus but this isn't ideal...

See http://dev.jqueryui.com/ticket/4731. An option will be added to make this configurable in 1.9. — cope360, Oct 27 '10 at 15:53
See http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox for details of the code that causes this. — cope360, Oct 27 '10 at 15:54
[See my solution to prevent jumping focus to jQuery UI Dialog][1] [1]: http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox/9428501#9428501 — Roc, Feb 24 '12 at 09:52

score 74 · Accepted Answer · answered Feb 03 '10 at 20:15

Use the blur method. You can try this sample.

<html>
    <head>
        <title>No Focus on jQuery Dialog</title>
        <link type="text/css" rel="stylesheet" href="ui.all.css" />
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.dialog.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // Dialog to confirm or cancel
                // Focuses on confirm by default.
                $('#noFocusDialog').dialog({
                    autoOpen: false,
                    buttons: {
                        Confirm: function() {
                            $(this).dialog('close');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                        }
                    }
                });

                // Trigger to open the dialog
                $('#openNoFocusDialog').click(function() {
                    $('#noFocusDialog').dialog('open');

                    // Remove focus on all buttons within the
                    // div with class ui-dialog
                    $('.ui-dialog :button').blur();
                });
            });
        </script>
    </head>
    <body>
        <a id="openNoFocusDialog" href="#">Open Dialog</a>
        <div id="noFocusDialog">
            <p>Confirm that no elements have focus</p>
        </div>
    </body>
</html>

score 19 · Answer 2 · answered Dec 03 '12 at 07:08

thanks for answers, but it seems to me that the best solution (at least for me, minimal code and no unnecessary use of methods on the DOM) is to define your dialog buttons in an array of object :

buttons: [{
            id  :   "button1",
            text    :   "Button1 text",
            title   :   "tooltip1text1",
            tabIndex:   -1,
            click   :   clickCallback 
        },{
            id      :   "button2",
            text    :   "Button2 text", 
            title   :   "tooltip1text2",
            tabIndex:   -1,
            click   :   function(){$(this).dialog("close")}
        }]

The important part to prevent your buttons to get focus is : tabIntex:-1

It is also a convenient and readable way to give id to your buttons.

Not a good idea. This breaks accessibility -- it disables using the tab key to navigate the ui. — Vroo, Nov 07 '13 at 19:53
If you're worried about accessibility (as @Vroo mentions) this answer is still valid if there is only button and it closes the dialog. This way the user can just use the escape key to close it. Just make sure to leave the `closeOnEscape` property as `true`. — Mike, Jul 05 '15 at 07:13

score 8 · Answer 3 · answered Jan 08 '11 at 13:04

I had this same problem... Trying to set the focus to another element didn't seem to do the trick for me, but blurring focus from the selected element (in the "open" callback) did:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $('#element-that-gets-selected').blur();
        }
    });

I suppose a way to prevent focus without specifying a specific name would be to use a selector with first, like this:

    $('#dialog').dialog
    ({
    open: function ()
        {
        $(this).find('select, input, textarea').first().blur();
        }
    });

I actually used @Ed Saito's code inside the `open:` option's function and it worked well. Like: `open: function() { $(".ui-dialog :button").blur(); } — JustinP8, Apr 08 '11 at 19:35

score 7 · Answer 4 · answered Feb 26 '13 at 08:56

buttons: [
    {
        tabIndex: -1,
        text: 'Yes',
        click: function(){
            DeleteStuff();
            $(this).dialog('close');
        }
    },
    {
        text: 'No',
        click: function(){
            // Don't delete
            $(this).dialog('close');
        }
    }
]

This is the only way I got it working. tabIndex: -1 is the solution.

Oh, and I wanted to focus on the second button, so my "Delete Item?" confirmation would by default not delete the item.

score 4 · Answer 5 · answered Jan 28 '11 at 19:28

It's clear focus is causing the jQuery Dialog to scroll to interesting areas when opened. It's referenced just about everywhere now.

blur works, but not if you have a lot of content. if the button is at the bottom of the content, blur will remove the selection, but leave the dialog scrolled to the bottom. using scrollTop scrolled the content to the top, but left the button selected. If a user accidentally hit the return key, the button or link would fire. I chose a combination:

$('#dialog').dialog({
    open: function (event, ui){

        $('a_selector').blur();
        $(this).scrollTop(0); 

    }
});

worked like a champ...

joalcego · Answer 6 · 2017-07-21T18:03:50.817

3

Just add this line to remove the autofocus functionality:

$.ui.dialog.prototype._focusTabbable = function(){};

You can add it in a shared javascript file and it will prevent autofocus of all your dialogs! No more copy and paste in all your dialogs

edited Jul 21 '17 at 18:03

answered Jul 21 '17 at 17:54

joalcego

1,098
12
17

works. Whereas 3-4 other solutions proposed failed. . – Razvan_TK9692 Dec 18 '20 at 02:48

score 1 · Answer 7 · answered Feb 07 '13 at 10:20

1

This is what I usually do, works all the time:

open: function() {
    $('.ui-dialog button').removeClass('ui-state-focus');
},

answered Feb 07 '13 at 10:20

silkfire

24,585
15
82
105

score 1 · Answer 8 · answered Sep 29 '13 at 16:20

Or, simply creating a dummy input before calling the other buttons works just as well. This works because the UI simply looks for the first "input" as the default, by tricking the UI into seeing a false input first, the focus is redirected.

<div id="dialog-confirm" title="Warning!">
<input type='text' size='0' style='position:relative;top:-500px;' />
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit
 amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p>
</div>

score 1 · Answer 9 · answered Mar 06 '15 at 09:51

Well, all solutions here seems to go with code or hacks. So I'll post mine, that is based just in CSS override. What bothered me was the outline that made the button look as "selected", so I simply overrided it with "none":

.ui-dialog .ui-dialog-titlebar button.ui-button:focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active,
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover  {
    outline:none;
}

You can also add/override any other style that is bothering you :)

This is the only answer on this page that worked for me. Altering the JS did nothing. Thank you! — ViaTech, Jun 28 '18 at 22:09

score 1 · Answer 10 · answered Aug 11 '15 at 16:34

Base on ED and Lev's answers, I got this good solution:

    jQuery("#testDialog").dialog({
        height: 280,
        width: 400,

        open: function () {             
            jQuery(this).closest( ".ui-dialog" ).find(":button").blur();
        }
    });

score 1 · Answer 11 · answered Jun 16 '17 at 15:31

1

I know the answer has already been selected, but there is a simple HTML solution that I found here a long time ago.

Add the following code as the first element inside the DIV you designate as your dialog.

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

answered Jun 16 '17 at 15:31

Matt Finucane

181
1
2

How is this helpful? What accessibility functionality does this provide? – Agi Hammerthief Jan 10 '18 at 12:53

score 0 · Answer 12 · answered Feb 13 '15 at 21:16

I stumbled upon a little hack to fix this that others may find useful. A solution like this seems to work for me:

$( "#button" ).click(function() {                                   
    // this is a hack to prevent the focus from remaining after a click
    $(this).toggle(this.checked);                                       
});

It simply programmatically sets it checked again, which seems to clear up the focus issue.

score 0 · Answer 13 · edited Jul 30 '19 at 01:50

0

I could do this in this way. jquery-ui-1.12.0.custom/jquery-ui.css -> onuline:none add on 896 line ouline:none

.ui-widget button {
        font-family: Arial,Helvetica,sans-serif;
        font-size: 1em;
        outline:none;
    }

edited Jul 30 '19 at 01:50

atymic

3,093
1
13
26

answered Jul 30 '19 at 00:59

shinchul son

1
1

jQuery UI dialog button focus

13 Answers13

Linked