jQuery UI dialog button focus


jQuery UI dialog button focus



when a jQuery UI dialog opens it seems to select 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...




Is it possible to override facelets.development for different environments?

1:



JSF UIInput in DataTable Footer
Use the blur method.


How can I get values out of a selectOneMenu inside a JSF datatable?
You can try this sample..
What is the best way to validate multiple fields using JSF Framework?
<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. 


JSF, how to use EL in onclick
$('#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>


<rich:ajaxValidator> How submit data after validation?


How to personalize item display in a h:selectOneRadio component? [duplicate]

2:



How can I create an error handling page in ICEfaces (with Facelets)?
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..


3:


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();         }     }); 


4:


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....


5:


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..


6:


This is what I usually do, works all the time:.
open: function() {     $('.ui-dialog button').removeClass('ui-state-focus'); }, 


7:


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>


8:


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..


9:


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 :).


10:


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();         }     }); 



94 out of 100 based on 84 user ratings 934 reviews

@