Inline Selectize doesn't seem to be firing submit

dan.blows@mooveagency.com

I am using a DataTable with the inline editor.

When I use the 'selectize' field type then the options are being populated correctly but after changing values, no ajax request is submitted. When I click out of the control, it reverts back to the original data without the form view.

I can see in the developer tools that the select control on which Selectize depends is being updated. All the other fields work fine. If I switch the field type just to 'select' then it works fine.

I've tried it on different fields, with and without the multiple attribute, and have the same problem either way.

Relevant code:

// field configuration
{
    name: "numbers",
    options: [
        { value: 1, label: "one"},
        { value: 2, label: "two"},
    ],
    type: 'selectize',
    attr: { multiple: true }
}

// listener
table.on( 'key-focus', function ( e, datatable, cell ) {
    editor.inline( cell.index(), {
        onBlur: 'submit',
    });
});

Unfortunately, it's running in a local Vagrant so I can't give a live link, and I won't be able to put a public link to the Debug info. Also, the DataTables live doesn't have the select library.

allan

Thanks for the code. I'll try to create a local example that demonstrates the issue and will post back tomorrow when I've done so.

Allan

allan

This is indeed a bug in the Editor core. The issue is that Selectize is using modifying the original value array, rather than returning a new one when getting the value (that isn't a bug, its just wasn't quite what I was expecting) and Editor isn't coping correctly with that.

Editor will attempt to find only the field values which have changed, and it does that using a simple comparison - == - but in this case, although the array content is different, it is the same array, thus Editor "thinks" nothing has changed, and thus the issue.

Two options:

1. Use the form-options and set submit: 'all' so it doesn't just submit the diff values.
2. Find the following line in Editor:

    this.s.editData = this.multiGet();

and change to be:

    this.s.editData = $.extend( true, {}, this.multiGet() );

That isn't perfect, but its a lot better than the current option since it will submit your data.

It isn't perfect, because for array based information, such as in this case, it now thinks that there is always a difference... Some cunning JSON encoding might be required to fully address that.

Allan

dan.blows@mooveagency.com

Brilliant, thanks Allan - I'll have a go with this and update.