Calling focus on hidden elements breaks page on ie8 #3505

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

Comments

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

@davidosullivan

This comment has been minimized.

Show comment
Hide comment
@davidosullivan

davidosullivan Feb 3, 2012

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?

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

This comment has been minimized.

Show comment
Hide comment
@jakeboone02

jakeboone02 Feb 3, 2012

Contributor

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

Contributor

jakeboone02 commented Feb 3, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@gnoon

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

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 added a commit to sgrebnov/jquery-mobile that referenced this issue Feb 9, 2012

@johnbender

This comment has been minimized.

Show comment
Hide comment
@johnbender

johnbender Feb 10, 2012

Contributor

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

Contributor

johnbender commented Feb 10, 2012

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

@scottjehl

This comment has been minimized.

Show comment
Hide comment
@scottjehl

scottjehl Feb 27, 2012

Contributor

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

Contributor

scottjehl commented Feb 27, 2012

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