Selectize crashes on inline create

mc2dev

Hi,
I'm using Selectize plugin for one of my data table column.
Here is a part of my config :

{
        label: 'Titre',
        name: 'titre',
        type: 'selectize', // Using Selectize plugin here
        options: getTitleOptions(data, predefinedPostes), // Dynamic options array
}

I'm creating each row inline :

editor.inlineCreate(this, {
        onReturn: 'submit',
})

But, Selectize crashes when I try to change the first selected option.

I think that the script detects that I'm selecting a table row because this log message appears in this script :

editor.on('preOpen', function (e, mode, action) {
            if (action === "edit") {
                console.log("This message is displayed in console");
            }
});

I tried to use a standard select or to create new row with a "classic create" (with modale) and it works in the both cases but doesn't match my needs.

Do you have an idea of what I'm missing here?

Thank you for your support!

kthorngren

But, Selectize crashes when I try to change the first selected option.

What exactly happens?

Do you get errors in the browser's log?

Kevin

mc2dev

Hi Kevin,
Thank you for your time.

Here is an screenshot of what is displayed when I change the first selection option of my selectize field:

Here, if I click inside or outside selectize field, it doesn't create the row and the selectize disappears.

I don't have any error in the browser's log.
Only the message "This message is displayed in console" appears as write in my third code example.

I'm trying to reproduce the problem in live.datatable.net. I'll post it when it'll be ready.

mc2dev

As I write in my previous message, I reproduced this behaviour in this example => http://live.datatables.net/dipahesa/4/

You can create a new row with the "create" button. As you can try, if you select an option in the selectize and then you choose an other option, it crashes.

Thank you for your time and help!

kthorngren

When you say "crash" do you mean the row is not created?

I updated the inlineCreate() call to submit on blur. See the last example in the docs

After adding this I see this error:

Uncaught Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

Not sure what is in your environment but I added idSrc as the name object and updated the select list to create unique names. This is just for testing, not saying you need to do this.

Also for the test case I changed this:

        conf._input.selectize( $.extend( {
            valueField: 'label',  // Changed this to display the label

I changed valueField from value to label. This is so the test case shows the right name. Not sure if you will need to do this in your code.

http://live.datatables.net/dipahesa/4/edit

If you are wanting to select multiple items then you will need to pass the maxItems option using opts. See the selectize docs for details. Something like this:

      fields: [{
        label: 'Name',
        name: 'name',
        opts: {
          maxItems: null,
        },
        type: 'selectize',
       ....

Kevin

mc2dev

Hi Kevin,

Thanks to your answer I updated the example source code to create a new row as expected but the problem persists:

If I select "Ashton Cox" and finally, I want to select "Tiger Nixon" before creating the row, I click again on the selectize field to display options again but the row is created before I can change my first choice...

I think the program considers my click on selectize field as an "onBlur" event so it submit the first option.

I can't upload a video on this forum to show you exactly what I'm trying to explain but I hope my explanations are clear.

Here is my updated example : http://live.datatables.net/dipahesa/7/

Thanks for your time.

allan

I've modified the plug-in slightly: http://live.datatables.net/dipahesa/8/edit .

That said, Selectize is doing something very odd with the nodes, so it might not be perfect. The example as a whole doesn't appear to do very much for me, but my change might work better in a real environment.

Allan

mc2dev

Thanks for your answers Allan,

Unfortunately, I paste the code in Selectize script but it doesn't work better in my environment...
I don't know why but my script don't run the "owns" function but it runs the "update" one when I click again on the selectize field.

Any idea about it?

Thank you for your support!

allan

Could you give me a link to your page showing the issue so I can debug it please?

Thanks,
Allan