tab to next cell in tablesorter with editable and stickeyheaders widgets

Question

I'm trying to make a dynamically loaded table use tablesorter with both the editable and stickyHeaders widgets enabled.

I've got it pretty close to working. One weird thing though. If I click in an editable cell then press tab, the next cell is activated but only for a split second then loses focus.

In Chrome, the cursor just disappears.

In Safari, after the second cell loses focus you can see the cursor jump to the far right of the header row of the table where it sits blinking until you click somewhere else. Heres a picture showing the cursor in Firefox

Here is a striped down version of the demo for the editable widget that works as expected: Editable working version

Here is a striped down version of the demo for the editable widget with the stickyheaders also added which breaks the tab to next cell feature:

Editable + Stickyheaders not working

The only difference is the addition of Stickyheaders

---

EDIT:

Ok, the problem seems to be this chunk of code starting at line 885 of jquery.tablesorter.widgets.js

searching: function(table, filter, skipFirst) {
        var wo = table.config.widgetOptions;
        clearTimeout(wo.searchTimer);
        if (typeof filter === 'undefined' || filter === true) {
            // delay filtering
            wo.searchTimer = setTimeout(function() {
                ts.filter.checkFilters(table, filter, skipFirst );
            }, wo.filter_liveSearch ? wo.filter_searchDelay : 10);
        } else {
            // skip delay
            ts.filter.checkFilters(table, filter, skipFirst);
        }
    },

If I comment it out as below, tabbing functionality is restored:

    searching: function(table, filter, skipFirst) {
        /*var wo = table.config.widgetOptions;
        clearTimeout(wo.searchTimer);
        if (typeof filter === 'undefined' || filter === true) {
            // delay filtering
            wo.searchTimer = setTimeout(function() {
                ts.filter.checkFilters(table, filter, skipFirst );
            }, wo.filter_liveSearch ? wo.filter_searchDelay : 10);
        } else {
            // skip delay
            ts.filter.checkFilters(table, filter, skipFirst);
        }*/
    },

---

It seems the above chunk of code is what hides all of the non matches when you search for a value using the inputs at the top of the table. Commenting it out fixes the tab feature but breaks the filtering feature.

Any ideas how I can modify this chunk of code to get the normal tab to next cell working again with out breaking the filter?

Answer 1

I got it.

On line 604 of jquery.tablesorter.widgets.js, I changed....

This check:

if (event.type === 'filterReset') {
    c.$table.find('.' + ts.css.filter).add(wo.filter_$externalFilters).val('');
    ts.filter.searching(table, []);
}...

To read:

if (event.which !== 9){
} 
else if (event.type === 'filterReset') {
    c.$table.find('.' + ts.css.filter).add(wo.filter_$externalFilters).val('');
    ts.filter.searching(table, []);
} .....

So far, this seems to fix the tab feature without breaking any of the sorting functionality.

(To be fair this may have some as yet unknown side effect)

Here is a demo of the working version