Skip to main content

Search and Top Navigation

#5763 closed bug (duplicate)

Opened June 23, 2010 07:02PM UTC

Closed October 01, 2010 07:15PM UTC

Last modified October 11, 2012 09:15PM UTC

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:

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.

Attachments (0)
Change History (3)

Changed August 18, 2010 01:56AM UTC by minalenan comment:1

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) {
        var tabbables = $(':tabbable', this),
                first = tabbables.filter(':first'),
                last  = tabbables.filter(':last');

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

Changed October 01, 2010 07:15PM UTC by scottgonzalez comment:2

resolution: → duplicate
status: newclosed

Duplicate of #3768.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:3

milestone: TBD

Milestone TBD deleted