Footer inputs losing focus on table update

dclar43

Hello,

So as the title implies I'm having an issue with inputs in the footer losing focus. This happens when the table updates(inputting a single character into the input which triggers a search/update) as well as when the floating footer is removed as the original comes into view. Here is an example video: link

I was able to address the part where a search update removes focus by changing

update: function ()
{
    this._positions();
    this._scroll( true );
},

To this

update: function ()
{
    this._positions();
    this._scroll( false );
},

My immediate tests didn't show any ill results but I'm guessing it was true in the beginning for a reason. I'm assuming that the loss of focus resulting from returning to the original footer is a bit more complicated. My cursory glance at fixedHeader leaves me to believe the floating elements are copies of the original DOM elements. Which means specific logic would be needed for this case.

Does anyone have an existing solution? Or Allan, is this something that could be fixed/added to fixedHeader? It's the only thing keeping me from using the footer support which is very handy with the search footers I've added.

Edit: Crap I could have sworn I checked this subforum and didn't see any other posts. Digging through them now to see if there's already an answer.

Dennis14e

I have exactly the same problem, but I still have no solution.
With version 2.1.2 everything still worked without any problems.

allan

What might be happening is that the element is inserted into the document as part of the table and then back out to its own floating position and that is causing it to loose focus. Could you link to the page showing the issue?

The latest versions of FixedHeader don't display a clone (the old versions did) - a clone is used for spacing in the hidden background though.

Allan

Dennis14e

Live examples:

• FixedHeader 2.1.2: http://live.datatables.net/zobeciva/1
• FixedHeader 3.1.1: http://live.datatables.net/turuxura/1

allan

Thanks! That's really weird since it is the same element. The browser must have it loose focus when it is reinserted into the document. I'll try to make some time to experiment with this.

Regards,
Allan

Dennis14e

I have the example of version 2.1.2 again updated because these contained errors.
However, nothing changes the fact that it works there and in version 3.1.1 not.

• FixedHeader 2.1.2: http://live.datatables.net/zobeciva/2

dclar43

Thanks @Dennis14e for setting up those examples, been a bit busy lately.I can confirm that this behavior is similar to what I've experienced.

smassot

Hello, same problem for me, I unfortunately couldn't link to a test case because I'm too busy for the moment.

I try to use 2.1.2 version instead of 3.1.1 but it didn't work and fix header :/

Dennis14e

@allan Is there any update on this?

allan

No sorry. I've not had a chance to work on this yet. I'll post back here when I get a change to do so.

Allan

allan

Fix finally committed :-).

I created a little test case to demonstrate the issue (same happens with DOM methods rather than jQuery as well). My workaround is to record if an element has focus in the header or footer before its state is changed. Then if it is changed focus is given back to it.

It is still possible, that the cursor position will change after the transition, but this mostly resolves the issue.

Allan