2

Note: this question is probably too specialized. The solution (if I ever find one) is unlikely to help anyone but myself. Nonetheless, I believe the workaround described below to apply to several borderline Chrome/jQuery focus loss scenarios.

Scenario:

I have an input TEXTAREA to enter some text.

Meanwhile, a timer makes periodical AJAX calls to the server (one per minute).

What happens:

In Firefox, everything is hunky dory and the user can type away to his heart's content.

On Chrome, when the AJAX request fires, the input focus is lost. It goes... nowhere, apparently. window.activeElement returns nothing, and the cursor indeed disappears from the textarea, until the user clicks it again with the mouse.

What I expected:

Well, for the focus to stay there.

Attempts:

One - I have tried setting an event handler on the textarea's [.focusout()][1], only to discover that the event does not fire. It does fire when the user clicks somewhere else, but that doesn't help.

Two - I have then tried a less elegant - say rather, brutal - approach:

var hasFocus = document.activeElement;
if (hasFocus) {
    var focusKeeper = window.setInterval(function(){
        hasFocus.focus(); // JUST. STAY. THERE.
        $(hasFocus).css("background-color", "red");
    }, 10);
}

The field goes red, so the handler is firing at least. Except that the focus does not come back. It's just as if Chrome isn't even trying.

Again, everything works as expected in Firefox. I'll try next on Safari to confirm whether this is a Webkit-related thing.

Research and more attempts:

I've found several posts on how to overcome focus loss, or how to set the focus in the first place, even on newly created fields (which mine isn't), but my case seems different enough that they either offered no clue, or just plain didn't work. The documentation states that

element.focus();

is necessary and sufficient, yet sufficient quite clearly it is not. Someone has suggested setting focus using a zero-delay timeout; I tried, but this did not seem to help.

Could this be related to the fact that Chrome maybe runs XHR requests in a different process, so that the "focus" is going to the hidden XHR window? (Haven't tried with the --process-per-site commandline switch, it just occurred to me - I will now give it a try).

Could this be a bug? There was something like it, but bug 27868 was related to Flash objects, not TEXTAREAs - that's a completely different animal AFAIK.

The strange thing is that this behaviour (or one amazingly similar) was noted on Firefox and the bug reporter says explicitly, focus should remain on the same input control like in other browsers, so he did not observe it on Chrome.

JSFiddle - not exhibiting the behaviour, thus supplying a clue

I made a fiddle, and... it works. So the issue seems to be more with the function called in the timer, which is a w2ui grid.reload(). I still do not understand why the focus doesn't come back using focus(), as it should.

Acceptable workaround

Inspired by amphetamachine's comment, I've tried combining several of the tricks in the posts above. I've come up with a combination that works... sort of.

The elements needed (whichever I remove, the trick stops working) are:

  • re-set the focus manually where it was
  • do this inside a setInterval timer
  • blur the focus before re-setting it
  • unset and reset the focus inside a short, but not zero, setTimeout delay.

    // Save focus.
    hasFocus   = document.activeElement;
    
    w2ui.myGrid.reload(function() { // Callback, called after reloading.
        // If there was no focus, we just return.
        if (hasFocus) {
            // We DON'T do anything directly, but use setTimeout.
            window.setTimeout(
                function() {
                    // And before setting the focus, we truly remove it.
                    hasFocus.blur();
                    hasFocus.focus();
                }, 5); // A timeout of 0 does not work.
        }
    });
    

The "con" of this solution is that the cursor visually "shivers", and any key that was pressed during the second part of the grid.reload(), after the unknown event that loses the Chrome focus, will of course get lost.

3
  • Iserni.. can you make small fiddle to reproduce the problem. Sep 19, 2014 at 14:06
  • I have tried setting an event handler on the textarea's .focusout() -- Have you tried .blur()? Sep 19, 2014 at 14:23
  • I made a JSFiddle but I'm unable to reproduce your issue. Could you verify that this is what you wanted? jsfiddle.net/61akgoe7 The output is in the console.
    – KoenW
    Sep 19, 2014 at 14:25

1 Answer 1

0

Obsolete: just update the libraries.

The strange behaviour disappeared by upgrading w2ui to 1.4.2 on the latest Chrome (actually, I did not try on previous Chromes because I didn't think to keep copies of the previous versions).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.