Skip to content

Calling focus on hidden elements breaks page on ie8 #3505

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

5 participants

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

@sgrebnov sgrebnov added a commit to sgrebnov/jquery-mobile that referenced this issue Jan 31, 2012
@sgrebnov sgrebnov 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?

@jakeboone02

@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
gnoon commented Feb 8, 2012

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

@sgrebnov sgrebnov added a commit to sgrebnov/jquery-mobile that referenced this issue Feb 9, 2012
@sgrebnov sgrebnov Fixes #3505 (v2) Calling focus on hidden elements breaks page on ie8 9c275b8
@johnbender

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

@scottjehl

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

@scottjehl scottjehl reopened this Feb 27, 2012
@scottjehl scottjehl pushed a commit that referenced this issue Feb 27, 2012
scottjehl undid changes introduced to address issue #3505. 699e1a4
@scottjehl scottjehl pushed a commit that closed this issue Feb 27, 2012
scottjehl 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
@scottjehl scottjehl closed this in 4feaa46 Feb 27, 2012
@Josh68 Josh68 referenced this issue in angular-ui/ui-select Mar 17, 2015
Merged

Fix for selects not working in IE8 #754

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.