Inline editor not closing field on blur first/last cell in table

Inline editor not closing field on blur first/last cell in table

geometrygeometry Posts: 22Questions: 6Answers: 0

As per the title when tabbing away from either the first or last cell the inline editor does not close the field. I have my datatable setup to work with tabs only (and click) on cells that have the class editable. Tabbing between cells works fine but when I get to the last cell in the table (last cell on the last page) when I tab and focus moves to some non data table element the editor in that last cell does not close/submit even though I have submit: onBlur

The "key-blur" event fires but the inline field editor doesn't close? Any ideas what would cause this? I see that the default for keys.blurable is true so I am unsure what might cause this

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,468Questions: 1Answers: 10,466 Site admin
    Answer ✓

    Hi,

    Thanks for your question. I've just tried to replicate the issue with this example but haven't been able to do so. Are you able to give me a link to your page? Also are you using the latest versions of the software (the debugger can tell you this).

    Thanks,
    Allan

  • geometrygeometry Posts: 22Questions: 6Answers: 0

    Hi Allan,

    Thanks for the response. I have updated all my versions and solved the problem using the example code to modify my code and setting up the editor using editor and editOnFocus options of keyTables which are new? (or just new to me?)

    keys: {
        keys: [ 9 ],
        columns: ".editable",
        className: "highlight",
        editor: editor,
        editOnFocus: true
    }
    

    I think I was running into this behaviour due to mashing together a few examples of the editor namely adding click/key event handlers from the basic initialisation example and the tabbing example

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

    I think I had initially designed the way it worked around older versions/examples

    Thanks again for your help

  • allanallan Posts: 63,468Questions: 1Answers: 10,466 Site admin

    The editOnFocus option is new. The KeyTable / Editor integration has been improved over the last couple of versions of each, so its good to hear that the benefits of that are providing to be useful.

    Regards,
    Allan

This discussion has been closed.