Tab key navigation in dialog leaves button highlighted

[womp]

Using the tab key to navigate through the tabbable elements in a modal dialog leaves the last button highlighted (as though it still has focus) after the focus is cycled to the titlebar.

If you reverse navigate using shift-tab, the dialog close button is left highlighted as the focus moves into the dialog from the titlebar.

This is visible on the demo site with the "Modal Form" example.

[minalenan]

I have the same problem.

As a workaround, I modified the code for ui-dialog to explicitly blur the object that is losing focus...

open: function() {
...
if (options.modal) {
    uiDialog.bind('keypress.ui-dialog', function(event) {
        if (event.keyCode !== $.ui.keyCode.TAB) {
            return;
        }
        var tabbables = $(':tabbable', this),
                first = tabbables.filter(':first'),
                last  = tabbables.filter(':last');

        if (event.target === last[0] && !event.shiftKey) {
            first.focus(1);
            event.target.blur();//explicitly blur it
            return false;
        } else if (event.target === first[0] && event.shiftKey) {
            last.focus(1);
            event.target.blur();//explicitly blur it
            return false;
        }
    });
} 
...

[Scott González]

Duplicate of #3768.

[Scott González]

Milestone TBD deleted