Juan Carlos Oropeza Juan Carlos Oropeza - 1 year ago 59
jQuery Question

Why start selected the close button

Im trying the Jquery Dialog Demo

But the dialog show the

selected and like a blue halo. When click outside is clear. But seem weird this start that way.

I copy the sample code in a separated HTML and same behaviour.

Any idea why that happen and if there is a workaround for it?

enter image description here


<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
$(function() {
$( "#dialog" ).dialog();

<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>


Answer Source

According to @scott.gonzalez from link

In rc5 and previous releases the logic was: find the first tabbable element in the dialog and give it focus on open. In current SVN the logic is: find the first tabbable element in the following order: - content area - button pane - title bar and give it focus on open. This is done for accessibility to ensure that the dialog has focus when opened. We may change the logic after doing some testing to focus the actual dialog div if the close button is what would receive focus.

Try this:

    open: function() {
      $(this).parents('.ui-dialog').attr('tabindex', -1)[0].focus();