Cursor not moving on after editing & tabbing to next column

Hi,
I am finding that when clicking on a cell altering its contents & then tabbing to the next cell that although the border of the next cell changes colour the cursor remains in the previous one. I tried putting adding submission on blur but this had no effect. Am I missing something obvious in my set up?

Current editor & table implementations:

editor = new $.fn.dataTable.Editor({
data: data,
table: "#mileageTable",
idSrc: "EditingGridlineRowId",
keys: true,
fields: [
{ name: "car" },
{ name: "person" },
{ name: "mileage" }
],
});

        var table = $('#mileageTable').DataTable({
             "language": {
                "zeroRecords": "No records to display"
            },
            fixedColumns: true,
            responsive: true,
            dom: 'Bfrtip',
            ordering: false,
            searching: false,
            paging: false,
            info: false,
            data: mileageRecords,
            columns: [
                {
                    data: "car",
                    className: "centreColumn"
                },
                {
                    data: "person"
                },
                {
                    data: "mileage",
                    width: "20px",
                    className: "centreColumn"
                }
            ],
            rowId: "recordId",
            keys: {
                columns: ':not(.disableEditing, :first-child)',
                editor: editor,
                editOnFocus: true
            },
            autoFill: {
                columns:  ':not(.disableEditing, :first-child)',
                editor: editor
            }
        }); // end table

        $('#mileageTable').on('click', 'tbody td:not(.disableEditing, :first-child)', function (e) {    
            editor.inline(this);
                //editor.inline(this, {
                //    onBlur: "submit"
                //}); (this did not help with the cursor moving on issue)
        });