Opened 9 years ago

Closed 9 years ago

Last modified 7 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 9 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 9 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #3768.

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

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.