Opened 13 years ago

Closed 13 years ago

Last modified 11 years ago

#5763 closed bug (duplicate)

Tab key navigation in dialog leaves button highlighted

Reported by: womp Owned by:
Priority: major Milestone:
Component: ui.dialog Version: 1.8.2
Keywords: dialog, tab, navigation, highlight Cc:
Blocked by: Blocking:

Description

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.

Change History (3)

comment:1 Changed 13 years ago by 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;
        }
    });
} 
...

comment:2 Changed 13 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #3768.

comment:3 Changed 11 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.