jquery/jquery-mobile — Issue #3505: Calling focus on hidden elements breaks page on ie8
Author: davidosullivan
Created: 2012-01-30 16:04:39+00:00
State: open

I am not sure if what I have titled this is accurate but anyway here's the issue

When using the latest nightly of jQm and jQ1.7.1 IE8 (probably IE7 too) throws the following error

'Can't move focus to the control because it's invisible, not enabled, or of a type that does not accept the focus.'

You can see the fault in action in IE8 on windows XP (using IE8 browser mode in IE9 does not give the same error) on the demos page for the nightly:-
http://code.jquery.com/mobile/nightlies/20120129/demos/

I have tracked down the code at issue:-

and in the min version changing this (in line 48):-

b.length?b.focus():a.focus()

to this:-

b.length?setTimeout(function(){b.focus()},40):setTimeout(function(){a.focus()},40)

and in the uncompressed version (at line 2510) changing this:-

//direct focus to the page title, or otherwise first focusable element
$.mobile.focusPage = function ( page ) {
var pageTitle = page.find( ".ui-title:eq(0)" );

if( pageTitle.length ) {
pageTitle.focus();
}
else{
page.focus();
}
}

to this :-

//direct focus to the page title, or otherwise first focusable element
$.mobile.focusPage = function ( page ) {
var pageTitle = page.find( ".ui-title:eq(0)" );

if( pageTitle.length ) {
setTimeout(function(){
pageTitle.focus();
},40);
}
else{
setTimeout(function(){
page.focus();
},40);
}
}

solves the issue ;)