Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Calling focus on hidden elements breaks page on ie8 #3505

Closed
davidosullivan opened this Issue · 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 referenced this issue from a commit in sgrebnov/jquery-mobile
@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

@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 referenced this issue from a commit in sgrebnov/jquery-mobile
@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
@scottjehl scottjehl closed this issue from a commit
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
@Josh68 Josh68 referenced this issue in angular-ui/ui-select
Open

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.