"Tab between columns" inline editing breaks main editor tab functionality.

rdietzman2

I tried enabling the "tab between columns" inline editing example from here: https://editor.datatables.net/examples/inline-editing/tabControl.html

Unfortunately, this causes problems when selecting a row and using the "edit" button to open the main editor. This issue is not unique to my code and can be replicated on the above example page itself.

If you load the page, select a row and click "edit" everything works normally and you can tab between fields in the main editor form.

Then try clicking into an individual cell for inline editing. If you then select a row and click the edit button to load the main editor form, it will not allow you to tab between fields. Instead the form disappears (but not the modal dialog box) and the tab button navigates the table behind it.

Any thoughts on how to fix this behavior?

allan

Let me get back to you on this one later today. I've got a feeling that this is actually fixed already, but I'm not 100% certain and I'm not using a computer with an Editor build on it at the moment I'm afraid (traveling). I'll check it out once I get back and will let you know what I find.

Allan

laxuz

Having the same issue. Using the "New" button will also generate the same bug.
How to replicate the bug:
1. Load the page: https://editor.datatables.net/examples/inline-editing/tabControl.html
2. Click one of the table cell to enable editing
3. Click "New" button
4. Press "Tab" on the keyboard
5. At this point, the form from the "Create New Entry" will disappear. And notice that the tab button navigates the table behind it.

allan

Fantastic - thanks! I've just committed a few changes into KeyTable which will improve its integration with Editor.

I'll tag and release it shortly.

Regards,
Allan

laxuz

thanks for the quick response. I downloaded KeyTable v2.3.0 from https://datatables.net/download/packages to test it. It seems that the scenario in my previous post still happens.

Side note:
https://editor.datatables.net/examples/inline-editing/tabControl.html
- the demo still pulls the KeyTable v2.2.1

allan

Thanks - that will be corrected when I publish Editor 1.6.5 shortly.

Drop this bit of code from your own use case:

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
 
    // Inline editing on tab focus
    table.on( 'key-focus', function ( e, datatable, cell ) {
        editor.inline( cell.index() );
    } );

That isn't needed anymore with KeyTable 2.3.0.

Allan

laxuz

thanks again for the response. Will wait for the Editor 1.6.5 then. Just to confirm i need to remove that code when the Editor 1.6.5 arrives?

allan

That is correct yes. The example will be updated at the same time as 1.6.5 is released (soon - I'm getting there ).

Allan

laxuz

Thanks again for the response. Tested the demo page https://editor.datatables.net/examples/inline-editing/tabControl.html and the bug is fixed. Thank you very much!