Selectize.js: Value selection is not working for newly created data.

[pyprism]

I am not able to select newly created value. But its perfectly working for predefined values.

Here is the code:

        (async function () {
            let  response = await axios.get('/api/tag/', {
                headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
            });
            let bunny = [];
            response.data.forEach(async function (data) {
                let nisha = {'name': '', 'id': ''};
                nisha['name'] = data.name;
                nisha['id'] = '' + data.id;
                bunny.push(nisha);
            });
            $('#tag').selectize({
                delimiter: ',',
                valueField: 'id',
                labelField: 'name',
                searchField: ['name'],
                options: bunny,
                create: function(input, callback) {
                    axios.post('/api/tag/', {'name': input},{
                        headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
                    }).then(function(res) {
                        callback({
                            'value': res.data['id'],
                            'text': input
                        });
                        //$.notify("Tag Created", "success");
                    });
                }
            });
        })();

[joallard]

Please follow the instructions for submitting issues. This issue has no demo, the example is not minimal, and has no steps to reproduce. Please fix and we'll reopen.

[skerit]

I know the problem he's running into, I've encountered it myself a few times,
and it's actually a misunderstanding of the create documentation.

Right now, it states:

In the synchronous case, the function should return an object for the options
(eg, with defaults: return { 'value': value, 'text': text };)

But in his initialization options he's clearly stating the valueField should be changed to id, and the labelField to name, but in his create callback he's still using value and text.

Now you can interpret the documentation in 3 ways:

• You have to use the default property names value and text
• The example given here is using the default property names
• You just skim over the 'defaults' bit entirely

It should be made a bit more clear that the properties of the result object need to match the names given in the initialization options. (And, if you're using them, they need to be the same format as the ones you're passing to render.item and render.option)