javascript - datatables editor focus again after save

Question

Having an issue with datatable, when i click on a cell and change then hit enter or click away it saves as expected but then wants to edit again (back in focus), which is then showing either the timepicker or making the input active. i want to be able to tab between cells, so need edit on focus, what i need is if i click on the cell and change it, this saves and not goes back into focus again, but able to tab to the next cell. is this possible ?

$(document).ready(function()
{
    if (document.getElementById('sdate2') !=null)
        var sdate2 = document.getElementById("sdate2").getAttribute("data-name");

    if (document.getElementById('shift') !=null)
        var shift = document.getElementById("shift").getAttribute("data-name");

    var editor;
    
    editor = new $.fn.dataTable.Editor(
    {

        "ajax": "../../ajax/step2/"+shift+"/"+sdate2,
        table: "#step_two",
        fields: [
            {
                label: "Start Time:",
                name: "pay_start",
                type:  'datetime',
                format: 'HH:mm',
            },
            {
                label: "End Time:",
                name: "pay_end",
                type:  'datetime',
                format: 'HH:mm',
            },
            {
                label: "Exception Reason:",
                name: "pay_reason",
                "type": "select",
                "options": [
                    "",
                    "Option1",
                    "Option2"
                ]
            },
            {
                label: "Comments:",
                name: "comments",
            }
        ],
        formOptions:
        {
            inline:
            {
                onBlur: 'submit'
            }
        }
    });

    $( 'input', editor.node() ).on( 'focus', function ()
    {
        this.select();
    });

    editor.field('pay_reason').input().on('change', function (e, d)
    {
        if (typeof d === 'undefined')
        {
            editor.submit();
        }
    });


    $('#step_two').on( 'click', 'tbody td.editable', function (e)
    {
        editor.inline( this,
        {
            onBlur: 'submit'
        });
    });

    var table2 = $('#step_two').DataTable( 
    {
        dom: "BSrti",
        ajax:
        {
            url: "../../ajax/step2/"+shift+"/"+sdate2,
            type: "POST"
        },
        scrollY: "65vh",
        scrollX: true,
        paging: false, // removes pagination
        ordering: false, // removes sorting and sorting icons
        orderClasses: true,
        "language":
        {
            "emptyTable": "No results found"
        },
        columns: [
            { data: "id", width: '25px', "render": function ( data, type, full, meta ) { return  meta.row; } },
            { data: "e_name", width: '170px' },
            { data: "e_date", width: '95px' , render: $.fn.dataTable.render.moment( 'ddd DD/MM/YYYY' ) },
            { data: "e_exception", width: '120px' },
            { data: "start_scheduled", width: '75px' , render: $.fn.dataTable.render.moment( 'HH:mm:ss', 'HH:mm' )},
            { data: "end_scheduled", width: '75px' , render: $.fn.dataTable.render.moment( 'HH:mm:ss', 'HH:mm' )},
            { data: "start_actual", width: '75px' , render: $.fn.dataTable.render.moment( 'HH:mm:ss', 'HH:mm' )},
            { data: "end_actual", width: '75px' , render: $.fn.dataTable.render.moment( 'HH:mm:ss', 'HH:mm' )},
            { data: "pay_start", width: '55px' },
            { data: "pay_end", width: '55px' },
            { data: "pay_reason", width: '315px' },
            { data: "comments", width: '300px' },
        ],
        columnDefs: [
            { className: "col_0", "targets": [ 0 ] },
            { className: "col_1", "targets": [ 1 ] },
            { className: "col_2", "targets": [ 2 ] },
            { className: "col_3", "targets": [ 3 ] },
            { className: "col_4", "targets": [ 4 ] },
            { className: "col_5", "targets": [ 5 ] },
            { className: "col_6", "targets": [ 6 ] },
            { className: "col_7", "targets": [ 7 ] },
            { className: "col_8 editable", "targets": [ 8 ] },
            { className: "col_9 editable", "targets": [ 9 ] },
            { className: "col_10 editable", "targets": [ 10 ] },
            { className: "col_11 editable", "targets": [ 11 ] }
        ],
        keys:
        {
            columns: [ 8,9,10,11 ],
            editor: editor,
            editOnFocus: true
        },
        buttons: [
            { extend: 'excel', text: 'Export', className: 'btn btn-success btn-sm'  }
        ]
    });

    table2.buttons().container().appendTo($('#buttons2'));
});

question from:https://stackoverflow.com/questions/65868263/datatables-editor-focus-again-after-save

Answer 1

Waitting for answers