Skip to main content

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).

Attachments (0)
Change History (2)

Changed October 01, 2010 07:05PM UTC by scottgonzalez comment:1

resolution: → duplicate
status: newclosed

Duplicate of #6101.

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

milestone: TBD

Milestone TBD deleted