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: |
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.
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; } }); } ...