Can't edit input fields inside iframe app after using FB.login on Firefox

Question

I'm facing the problem that when I use FB.login inside my Facebook iframe app using Firefox I can't edit any input fields. The strange thing is that as soon as I set the focus anywhere outside the iframe (eg Facebook, or Firefox) and then changing back to the input fields in my iframe I can edit them again.

There are no problems with FB.login outside of Facebook (when the page is called directly) and this only occurs on Firefox, on other browsers it works fine (tested on Chrome and Safari). So I guess this is caused by Firefox.

I stripped down the whole code and just use the Facebook JS SDK and jQuery on a simple HTML page with only three input fields.

jQuery(document).ready(function(e) {
    $('a.facebookconnect').bind('click', function(e){
        e.preventDefault();
        FB.login(function(response) {
            console.log(response);
            if (response.authResponse) {
                $('.loggedin').show();
            }
        }, {scope: 'email'});
    });
});
window.fbAsyncInit = function() {
    FB.init({
        appId      : '###',
        status     : true,
        cookie     : true,
        xfbml      : true
    });
    FB.Event.subscribe('auth.statusChange', function(response) {
        if (response.authResponse) {
            FB.api('/me', function(me){
                if (me.name) {
                    $('.displayname').text(" as " + me.name);
                    $('#name').val( me.name );
                    $('#email').val( me.email );
                }
            })
        }
    });
};

Edit: This only occurs when the user already accepted the app before (the modal popup opens and than immediately closes again). When he needs to authorize the app it works fine.

Answer 1

Try to put window.parent.focus() right after this line: $('#email').val( me.email );

if (me.name) {
    $('.displayname').text(" as " + me.name);
    $('#name').val( me.name );
    $('#email').val( me.email );
    window.parent.focus();
}

I've had the same problem - couldn't get the focus on input fields, until I've selected the parent window inside the FB.api.