Firefox wrong focus on dhtmlxAjax.postSync()

Hey everyone!

I’m having a strange bug and it seems to be linked to calling dhtmlxAjax.postSync() and I can’t understand what’s happening.
My configuration is Firefox 16.0.2 under Windows 7 64bits. The bug is only on FF and I don’t have it under Linux.

I’m building a grid-like application and need to navigate between the cells using the TAB key. As long as there are still cells everything works fine, but when I reach the last cell in my grid, I make an AJAX call to create a new line and then focus the new cell. When this happens, the focus is given to another element in the page (the logout button) and I can’t understand why.

To ensure that the AJAX call is responsible, I’ve changed the behaviour. Before if another cell was present I gave focus to it, now I perform an AJAX call anyway. The script called just return some valid XML :

<?xml version='1.0' encoding='UTF-8' ?>

ok

I was hoping someone would have a clue on what’s happening here?

Thank you!

Hi
Could you provide us your code to reproduce the issue?

Hi Darya!

Thanks for answering! Providing my code is going to be a bit hard as its a whole application. I’m trying to create a simple testcase without much success for now.
I’ve replaced the dhtmlxAjax.postSync() with a simple $.ajax() from jquery to check if the problem comes from dhtmlx but it is also present with jQuery. After investigating a bit more, it seems that only synchronous AJAX calls lead to this issue.

Well
We will wait for a small demo to reproduce it. May be, it will help us to find, how to aviod this.
Pay attention, that we don’t recommend to place here PRO js library, if you have such. In this case you can place only html file.

Hi Darya,

It seems I have managed to create a minimal test case : jsfiddle.net/aVeQp/12/
If you click on the result window, then press tab, first it moves to the next cell, when there are no next cells it perform an AJAX request (doing nothing useful).
If the request is asynchronous, nothing wrong happens, if it is synchronous you’ll see the home button get the focus without reason.

Do you have any clue?

Thanks!

Hi,

When this happens, the focus is given to another element in the page (the logout button) and I can’t understand why.

When you press tab, the next element gets focus. It is standard browser behaviour. The focus is set with delay due sync ajax call. In case you make async request, the focus will be changed right after tab press.

Hi Alexandra,

I don’t understand you analysis. Whe pressing tab, if I don’t “catch” them, only specific elements get focus such as links or buttons. So I catch the TAB to abort default behaviour and decide to select the next div on my own. Why would calling a AJAX synchronous query change this behaviour?

What I mean is that even if I have other cells after the last one the home button will get the focus, not the next cell. It is not just because my cell is the last HTML element in the page.

Hi,

I see the issue… Try to call Ajax request with timeout, even 0ms timeout will do in this case:

window.setTimeout(function(){
var ret = $.ajax({type: ‘POST’, url: “tst.php”, data: { action: “test”}, datatype: “xml”, async: false});
},0);

Hi!

I tried with the setTimeout but it did not correct the bug either.

I have updated your demo:

jsfiddle.net/aVeQp/25/

Locally the focus doesn’t change with timeout.

Hi Alexandra!

Sorry I did not see your post as it was in a new page… You are right, setTimeout does not seem to lose the focus in the end. I’m pretty sure I tried this numerous time on my code but at least in the jsFiddle it corrects the issue.

Thanks !