Search and Top Navigation
#5896 closed bug (duplicate)
Opened August 04, 2010 01:07AM UTC
Closed October 01, 2010 07:05PM UTC
Last modified October 11, 2012 09:15PM UTC
Focus can leave a modal dialog when using the tab key in some browsers (including IE and Chrome)
Reported by: | erik | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | |
Component: | ui.dialog | Version: | 1.8.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Steps to Reproduce
- Use a browser other than Firefox or Opera (I've tried Chrome and IE8)
- Open a modal dialog (the "modal form" demo on the Demos & Documentation page works well)
- Press the tab key repeatedly
Expected Result:
- The focus stays in the modal dialog (like in Firefox)
Actual Result:
- The focus goes to other fields in the browser or behind the dialog after tabbing off the last focusable field in the dialog (or shift+tabbing off the close button). In most cases once this happens it is no longer possible to return focus to the dialog using the tab key.
Analysis
The problem appears to be related to the following code from the dialog open function:
// prevent tabbing out of modal dialogs if (options.modal) { uiDialog.bind('keypress.ui-dialog', function(event) { if (event.keyCode !== $.ui.keyCode.TAB) { return; } ...
In this code a keypress event is used to detect when the tab key is pressed. This works fine in firefox, but in most other browsers a keypress event is not fired for special characters (including the tab key). There is a detailed explanation of the keyboard events at http://unixpapa.com/js/key.html. Or to summarize, a quote from that article: "For nearly all modern browsers, both keydown and keyup events are triggered by modifier keys, but keypress events are not."
Using a keydown binding instead of a keypress seems to work in most browsers (including Chrome, IE8, and Firefox on Windows), but it doesn't work in all browsers for detecting auto-repeat events (where the tab key is held down). I can confirm that this fails in Opera, and it may also fail in other browsers (such as Firefox on a Mac) according to the above article.
So one solution might be to use a keydown event handler here (and where the event is unbound in the close funtion) by default, but continue to use the keypress handler in environments where the keydown event does not receive auto-repeat events for the tab key (such as in Opera).
Duplicate of #6101.