Select2 won't update if the option array is changed

[milansimek]

The component is called as follows:

<values selected="{{values}}" options="{{fieldValues[field]}}"/>

the [field] part of fieldValues[field] is dynamically updated by another component, resulting the options parameter to change.

Component content:

<select decorator='select2' value='{{selected}}' multiple="{{multiple}}" style="width:300px">
    {{#options}}
        <option value='{{.}}'>{{.}}</option>
    {{/options}}
</select>
<button on-click='reset-data'>Reset (two-way binding)</button>
<p>Selected option: {{selected}}</p>

The select2 html is not updated, although the last line {{selected}} is updated properly. Also, if I don't use the decorator, it works fine with regular select boxes.

After some more digging I created the following solution which can be placed in the decorator:

if (node._ractive.binding) {
        observer = ractive.observe('options', function () {
                if($(node).data('select2') !== undefined){
                    console.log('destroy');
                    $(node).select2('destroy');
                    window.setTimeout(function () {
                        $(node).select2();
                    },0);
            }
        });
    }

It will destroy and rebuild the decorator if the options are changed.

[milansimek]

This is better:

if (node._ractive.binding) {
    observer = ractive.observe('options', function () {
            if($(node).data('select2') !== undefined){
                window.setTimeout(function () {
                    $(node).select2();
                    $(node).select2('destroy');
                },0);
        }
    });
}

[milansimek]

And even better:

if (node._ractive.binding) {
  observer = ractive.observe('options', function () {
        if($(node).data('select2') !== undefined){
            window.setTimeout(function () {
                $(node).select2();
                $(node).select2('destroy');
                $(node).select2('val','');
            },0);
    }
});

}

[sandermarechal]

That's a really dirty workaround. You're destroying and recreating the entire select2 element every time any of the options changes. That causes FoUS and performance issues.

It would be much better to update the select2 options directly, but that seems to be a work in progress: select2/select2#2830

Sorry, but I can't put it in the decorator like this. When select2 allows modifying options through the API then I will be happy to add support for that though.