Server side processing tabbed value not opening date on focus

OllyJ918

jquery: function () {
                var editor = new DataTable.Editor({
                    ajax: '/api/myapi',
                    fields: [
                        {
                            label: 'Count:',
                            name: 'Count'
                        },
                        {
                            label: 'Date:',
                            name: 'Date',
                            type: 'datetime',

                        },
                        {
                            type: 'select',
                            label: 'SomeValue:',
                            name: 'SomeValue',
                            options: {
                                "No SomeValue": "",
                                "SomeValue 1": 1,
                                "SomeValue 2": 2,
                                "SomeValue 3": 3,
                                "SomeValue 4": 4
                            }
                        },
                        {
                            label: 'Some Bool:',
                            name: 'SomeBool',
                            type: 'checkbox',
                            options: [
                                { label: '', value: 1 }
                            ],
                            separator: '|',
                        }
                    ],
                    table: '#example'
                });

                var table = $('#example').DataTable({
                    ajax: {
                        url: '/api/myapi',
                        type: 'POST'
                    },
                    buttons: [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                        { extend: 'remove', editor: editor }
                    ],
                    columns: [
                        {
                            data: null,
                            defaultContent: '',
                            className: 'select-checkbox',
                            orderable: false,
                            searchable: false
                        },
                        { data: 'Count' },
                        {
                            data: 'Date',
                        },
                        {
                            data: 'SomeValue',
                        },
                        {
                            data: 'SomeBool',
                            render: (data, type, row) =>
                                type === 'display' ? '<input type="checkbox" class="some-bool">' : data,
                            className: 'dt-body-center'

                        },
                    ],
                    dom: 'Bfrtip',
                    order: [[1, 'asc']],
                    select: {
                        selector: 'td:first-child', //
                        style: 'os'
                    },
                    serverSide: true,
                    rowCallback: function (row, data) {
                        // Set the checked state of the checkbox in the table
                        $('input.some-bool', row).prop('checked', data.SomeBool == 1);
                    },

                    keys: {
                        columns: ':not(:first-child)',
                        keys: [9],
                        editor: editor,
                        editOnFocus: true
                    },
                });
    
                table.on('change', 'input.some-bool', function () {
                    editor
                        .edit($(this).closest('tr'), false)
                        .set('SomeBool', $(this).prop('checked') ? 1 : 0)
                        .submit();
                });

                // Activate an inline edit on click of a table cell
                $('#example').on('click', 'tbody  td:not(:last-child)', function (e) {
                    editor.inline(table.cell(this).index(), {
                        onBlur: 'submit'
                    });
                });

Description of problem:

Click on Count, then use tab, it gets the focus class for the date, however, when using serverside processing it doesn't open up the calendar to change the date, press tab again, the drop down is selected and you can use the arrow keys up and down to select various values.

If you select the date first it will tab between the checkbox and the date.

Is there something I'm missing here? Also is it possible to click the select list and have it open straight away rather than rendering a drop down over the number. And having to select it again.

If you disable server side it will work as intended. Is this something to do with the dom re-rendering when losing focus on an element? so it'll go to an non fully initialised element on the next tab.

I have changed the order so SomeValue is 2nd and when I click on Count then tab some value doesn't open, but when I tab again to the date, the date opens. so I think my thinking is along the right lines, I'm just not too sure of the inner working to debug it.

allan

Can you link to a page showing the issue please?

Allan