Selectize.js: New values (not in options) are not rendered from initial val when create:true

[stevelacey]

When using the setting create: true, you can add new values not present in options just fine, but if the initial value of the input included a new value – it is stripped when the initial options for the text box are rendered.

I can't pinpoint where this is happening, or how to mitigate it, but isn't this unexpected behaviour anyway?

Surely I am not meant to parse the initial value and slot new values into the options array? My use case is a tags field, where creating new tags is cool, but encouraging the reuse of existing tags is important, loading non-existant tags into the options seems a bit nonsensical.

[brianreavis]

Can you post a jsfiddle of what you're talking about? (template) I can't say I follow 100%

[stevelacey]

@brianreavis http://jsfiddle.net/2ub0abf7/1/ world should appear

[brianreavis]

Ah, I get what you're saying now. Selectize _could_ call create for any undeclared options upon initialization, but I feel like that would open up more edge cases / strange behavior (especially when async). I'll need to think on it – I'd suggest this for now: http://jsfiddle.net/rgybvjk1/

var $input = $('input');
var tags = $input.val().split(/\s*,\s*/);

$input.selectize({
    create: true,
    options: [{item: 'hello'}],
    labelField:  'item',
    valueField:  'item',
    sortField:   'item',
    searchField: 'item'
});

// create any custom tags that don't exist in the pre-defined pool of options
var selectize = $input[0].selectize;
for (var i = 0, n = tags.length; i < n; i++) {
    selectize.addOption({item: tags[i]});
}
selectize.setValue(tags);

[stevelacey]

I went for slotting them into the options I pass in the first place for the time being:

options: Lazy(@form__tags.data('tags'))
    .concat @form__tags.val().split(/\s*,\s*/)
    .map (tag) -> tag.trim()
    .filter()
    .uniq()
    .map (tag) -> item: tag
    .toArray()

[gharlan]

but isn't this unexpected behaviour anyway?

For me it is unexpected (the current behavior).

@brianreavis The problem with your solution is, that I want to use persist: false. So I don't want to add the undeclared options to the options array, because they would appear in the dropdown list after removing them.

[chipx86]

I've been hitting my head against a wall for a few hours now trying to work around this without forking the code. Has anyone found a solution yet that doesn't require persisting the options? @brianreavis, I'm willing to work on a patch to add proper support, if you have a design in mind.

[chipx86]

Alright, I figured out my issue, which is sorta related to this one. There was a perhaps slightly more appropriate place for me to cover the solution and the reason why it works, so I wrote it up there, but for reference: https://github.com/selectize/selectize.js/issues/568#issuecomment-128667562

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.