Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#8051 closed bug (fixed)

Dialog: 'Explode' dialog animation causes crash in IE 6, 7 and 8.

Reported by: arcana666 Owned by:
Priority: minor Milestone: 1.10.1
Component: ui.dialog Version: 1.8.17
Keywords: animation Cc:
Blocked by: Blocking:

Description

Using the example linked below you will see that IE 6, 7 and 8 will produce the error "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

The error does not happen if the 'show' parameter isn't set to 'explode'.

Example here: http://jsfiddle.net/Pr5rZ/

Change History (8)

comment:1 Changed 8 years ago by tj.vantoll

The issue is occurring in this code in jquery.ui.dialog.js.

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
var hasFocus = self.element.find( ":tabbable" );
if ( !hasFocus.length ) {
	hasFocus = uiDialog.find( ".ui-dialog-buttonpane :tabbable" );
	if ( !hasFocus.length ) {
		hasFocus = uiDialog;
	}
}

hasFocus.eq( 0 ).focus();

The code ends up trying to give focus to the dialog itself but it can't since the animation isn't complete and the true dialog still has its visibility set to hidden. All browsers except IE <= 8 ignore this, but IE <= 8 throws an error - http://jsfiddle.net/XUkEU/1/.

A kind of hacky fix would be to check to make sure the element that you're about to give focus to is actually displaying. This does fix this error in IE <= 8.

if ( $(hasFocus.eq(0)).css( 'visibility' ) != 'hidden' ) {
	hasFocus.eq( 0 ).focus();
}

But I think the correct way of handling this would be to defer running the focus logic until the animation completes. I would think you'd still want the focus logic to run after any of the animations, and right now it's a race condition where the focus logic will almost always run before the animation completes.

comment:2 Changed 8 years ago by Scott González

Keywords: animation added
Status: newopen

Thanks tj. This sounds like it should be fixed by the same fix for #4421.

comment:3 Changed 8 years ago by Scott González

Milestone: 1.9.01.10.0

comment:4 Changed 8 years ago by Jörn Zaefferer

Summary: 'Explode' dialog animation causes crash in IE 6, 7 and 8.Dialog: 'Explode' dialog animation causes crash in IE 6, 7 and 8.

comment:5 Changed 7 years ago by C6AC165B-7B1E-445F-804B-A1BFED06162F

Explode animation falls out of CSS scope. (will add separate ticket)

Explode animation produces 6 pieces not 9 (bottom three do not appear, at least when in a fully scoped css theme) (will add separate ticket)

Last edited 7 years ago by C6AC165B-7B1E-445F-804B-A1BFED06162F (previous) (diff)

comment:6 Changed 7 years ago by tj.vantoll

Milestone: 1.10.0none

comment:7 Changed 7 years ago by Kris Borchers

Resolution: fixed
Status: openclosed

Dialog: Move call to _focusTabbable and triggering of open and focus events into the _show callback. Fixes #6756 - Dialog: show: "blind" with link in content doesn't animate properly. Fixes #8051 - Dialog: 'Explode' dialog animation causes crash in IE 6, 7 and 8. Fixes #4421 - Dialog: Focus lost from dialog which uses show-effect

Changeset: d1505e3434ef99e0068347a5e8179a0ffd737676

comment:8 Changed 7 years ago by Scott González

Milestone: none1.10.1
Note: See TracTickets for help on using tickets.