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

[arcana666]

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/

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

[Scott González]

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

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

[Kris Borchers]

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