Skip to content
This repository

Calling focus on hidden elements breaks page on ie8 #3505

Closed
davidosullivan opened this Issue January 30, 2012 · 5 comments

5 participants

davidosullivan John Bender Scott Jehl Jake Boone gnoon
davidosullivan

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

Sergey Grebnov sgrebnov referenced this issue from a commit in sgrebnov/jquery-mobile January 31, 2012
Sergey Grebnov Fixes #3505 Calling focus on hidden elements breaks page on ie8 10c8b1f
davidosullivan

Sorry am a bit new to github, does sgrebnov's message above mean that this has been implimented in the latest code or do I still have to modify that manually if I get the latest nightly?

Jake Boone

@sgrebnov's pull request (#3516) was rejected, so no, it's not in the latest code. The comments on that PR explain why -- has to do with accessibility in IE.

gnoon

@davidosullivan, your solution helped me. I'm browsing my local web on XP pro SP3 IE8(.0.6001) with the plugin jquery 1.7.1 and jquery-mobile 1.0.1. The same error "'Can't move focus to the control because it's invisible" which, after I traced down, is on the element <h1>page title</h1>. Don't know why we need to wait for 40 milisecond before focus the element but thanks a lot.

John Bender johnbender closed this in 51b0677 February 10, 2012
John Bender

This is probably a good place to point out that getting set up with test swarm and browserstack would catch regressions like this.

Scott Jehl

As noted in the pull request, the fix for this issue undid some timing essentials on the page transitions. I'm reopening and undoing the changes, then I'll push up a fix that addresses it where the bug seems to really exist - in init.js (the ui-mobile-rendering class is not removed early enough).

Scott Jehl scottjehl reopened this February 27, 2012
Scott Jehl scottjehl closed this issue from a commit February 27, 2012
Moved the call to remove the ui-mobile-rendering class from the page …
…transition done() promise to init JS. Fixes #3505 and Fixes #3516
4feaa46
Scott Jehl scottjehl closed this in 4feaa46 February 27, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.