Remove Dialog Close Button Focus

When a jQuery UI dialog widget is first opened, it gains the focus of the page. This makes sense, given that most of the time, the dialog opening is the result of the user performing some action, such as clicking a button. The idea is that the dialog probably has some other element in it that needs the attention of the user, like, a text input. It's nice when the user is able to just open the dialog, then continue typing. But perhaps you don't want this behavior.

One issue with dialog instances is that if the widget is opened, and there's nothing within the dialog content to receive the page focus, it goes to the close button in the title bar. This means that pressing keys such as, the space key, result in the dialog being closed. Because the close button was focused, the space key was translated into a click event on the button.

While this isn't incorrect behavior — of course you want the dialog to close when the close button is pressed — it's not intuitive. By default, the dialog widget closes when the escape key is pressed. That makes perfect sense.

Here's how to prevent unintentional key presses from closing the dialog. Whenever the dialog is opened, we just have to find the button inside the ui-dialog-titlebar, and call blur() on it.