Partial focus after .inline()

CraigJ

I'm using the inline editing capability, along with key tables. When I give a cell focus by clicking into the table, I can tab, up arrow, down arrow, etc. If I start typing a value in the field, or hit enter initEdit() fires, etc. Then if I tab or arrow or click off the field the cell updates - this all works great.

I have added a button to do some external fetching, and update a specific cell, as follows: (it's kind of verbose, and the value is hardwired, as I'm testing)

//_this is a copy of this (c9.dashboard.opportunities) - we are using closers to keep the global namespace uncluttered

var rowID = _this.detail_table.row( { selected: true } ).id();    //get id of selected row
var selector = '#' + rowID + ' td:nth-child(2)';    //item_number is the 2nd column
var $itemCell = $( selector ); 
_this.detail_editor.inline( $itemCell );    //put cell in edit mode
_this.detail_editor.field( 'item_number' ).set( '12345678' );    //set item number

This actually works for the most part - initEdit fires, and the value is set. If I click off of the cell, or hit enter, it updates correctly.

Problem:

If instead of clicking off the cell I tab off the cell, it doesn't go to the next cell - it goes to another control on the page, and the data isn't updated unless I click back into the table somewhere.

I've tried a number of things, such as trying to set focus to the table cell prior to calling .inline(), and even adding the .focus class to the cell, but that doesn't seem to work.

I'm sure I'm missing something obvious.

allan

I'm thinking that its actually not that obvious! My guess (not certain without being able to see it) is that you need to call cell().focus() on the cell you want to edit to tell KeyTable where the keyboard focus should be. Then a tab will be able to move it on to the next cell.

Allan

CraigJ

I tried this, and I think I'm doing it correctly, but it doesn't seem to work. Using chrome tools, I can watch the element, and I see "class" added to the <td>, but not 'class="focus"' I've tried putting it before and after the .inline() to no avail. I've also tried .addClass("focus"), which I didn't really expect to work.

I've emailed you a link to the site with credentials and steps to duplicate. Here's my current code if anyone has any ideas:

$.fn.dataTable.ext.buttons.item_lookup = {
    text: 'Item Lookup',
    action: function ( e, dt, node, config ) {
//      $( '#item_lookup' ).modal('show');
//      step by step code for testing - TODO: clean up this code.

        var rowID = _this.detail_table.row( { selected: true } ).id();
        console.log( rowID );

        var selector = '#' + rowID + ' td:nth-child(2)';
        console.log( selector );

        var $itemCell = $( selector);
        console.log( $itemCell.text() );

        //this doesn't seem to work here - I can see "class" added to the td element, but no focus or other class
        _this.detail_table.cell( $itemCell ).focus();

        //This seems to work
        _this.detail_editor.inline( $itemCell );
        _this.detail_editor.field( 'item_number' ).set( '12345678' );

        //this doesn't work here either
        _this.detail_table.cell( $itemCell ).focus();

    }
};

colin

Hi @CraigJ ,

This here is what Allan had in mind. If you click the button, it initiates an inline edit - tabbing now goes across the cells as you requested. Hope that does the trick,

Cheers,

Colin

allan

Just to confirm - we've exchanged e-mails about this. I'll post back if we can resolve it. I think its related to using an Editor inside an Editor which isn't something we test for (or have even attempted to make work before!).

Allan

CraigJ

I found the focus issue - it was related to an event listener I had on $( document ).on( "click.detail_blur"), which was interfering with the focus aspect. I've fixed that and now the focus works, but the record doesn't update when tabbing off a field edited this way, and interestingly it also doesn't in the JS Bin posted above.

In the JS Bin example, clicking the "Update Cell" button does change the value, and set focus, however when tabbing off, while it will shift cell focus to the next cell, the input is still active. I see the exact same behavior in my application: If I click off the cell it updates correctly, but it won't update if I tab off.

If I double-click a cell to edit it and then tab off, it updates.
If I hit the enter key on a cell to edit it and tab off, it updates.

As best I can tell the 2 editors are separate and unrelated to each other - the one issue I did have was that the edit and create buttons wouldn't open a dialog becasue it was doing a test and there was already a dialog open, but I'm doing inline and don't need that anyway.

I've updated the example on the site I sent you - I'm also using the non-min versions of DataTables and Editor for debugging purposes.

CraigJ

Allan,

Thanks for the follow up email.

In the table def I set:

keys: {
    editOnFocus: true
}

Then in the button click routine:

var $itemCell = $( '#' + _this.detail_table.row( { selected: true } ).id() + ' td:nth-child(2)' );
$itemCell.click();
_this.detail_editor.field( 'item_number' ).set( item.ItemNumber );

This actually works. The only downside of this approach is that editOnFocus interferes with Excel style navigation - the up and down arrows don't function. I can probably live with this limitation for now, but Excel style navigation is why I went down the original road to editor.inline(). Of course it's always possible that I'm missing something.

Thanks for your help.