Ticket #5896 (closed bug: duplicate)

Opened 4 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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

Change History

comment:1 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to duplicate

Duplicate of #6101.

comment:2 Changed 2 years ago by scott.gonzalez

  • Milestone TBD deleted

Milestone TBD deleted

Note: See TracTickets for help on using tickets.