Keytable focus stuck on cell even though inline editing opened on another celll

constructx

Hi,

I am using keytable configured to open inline editing on a cell when the enter key is pressed. I I am also opening inline editing on clicking the mouse over any cell. I found that when I disable the keytable in the mouse click event, for obvious reasons, the focus remains stuck where it was, in this case on the first cell I clicked it shows up, if I click on others, it doesn't change from the initial cell. The key-focus event is also not fired. However if i do not disabled the keytable on the mouse click, the focus works as expected, but editor will be open on a cell while the arrow keys would take away the focus. Any help?

Code block-

var tableInstance = $('#' + tableID).DataTable({
    autoWidth : false,
    paging : true,
    bFilter : true,
    bInfo : false,
    ajax : pathtoData,
    columns :  modified_tableColumnsAJAX,
    bSort : false,
    keys: {
        columns: ':not(.non-editable-field)',
        editor : editor,
        keys: [ 9, 13, 37, 38, 39, 40, 113 ],
    },
    deferRender: true,
    stateSave : false,
    dom : '<"editor-toolbar"B>frtip',
    buttons: [
        { extend: "create", editor: editor },
        { extend: "remove", editor: editor }
    ],
    select: {
        style:    'multi',
        selector: 'td.select-checkbox'
    },
    "columnDefs": [
        {
            "targets": [ 0, 1 ],
            "searchable": false,
            "width" : 50
        },
        {
            "targets": [ 2, 3],
            "visible": false,
            "searchable": false,
        },
    ],
    initComplete: function(settings){   
        $('.loading-wrapper').hide();
        $('#' + tableID).removeClass('hidden');
    }
});

/* initialize datatable editor on pressing enter on a cell */
tableInstance.on( 'key', function(e, datatable, key, cell, originalEvent ){
    if ( key === 13 ) 
    {
        tableInstance.keys.disable();
        editor
        .one( 'close', function (){
            tableInstance.keys.enable();
        })
        .inline( cell );
    }
});

/* function to enable inline editing of a cell when clicked on the cell */
$('#' + tableID).on( 'click', 'tbody tr:not(.subtable-row) td:not(.non-editable-field):not(.inline-edit-active)', function (e){
    editor.inline(this);
    tableInstance.keys.disable();
});

A connected issue maybe, whenever inline editing is invoked using the enter key, that enter key is fired inside the editor control, textarea, and a new line is created.

Thanks.

constructx

My table and thead block is constructed dynamically after getting the table columns via ajax, and the data i use is a json array.

constructx

Ok, I figured a way around it, crude and I am still not sure if this may be a safe practice

I'm simply enabling the keytable just to set the focus and then i disable it again.

            
            /* function to enable inline editing of a cell when clicked on the cell */
            $('#' + tableID).on( 'click', 'tbody tr:not(.subtable-row) td:not(.non-editable-field):not(.inline-edit-active)', function (e){
                tableInstance.keys.enable();
                tableInstance.cell($(this)).focus();
                editor.inline(this);
                tableInstance.keys.disable();
            });