renderCache for options is not updated correctly when option changed but option.value stays the same

[bkonetzny]

When loading options, the rendered output of these options is stored in the renderCache. The renderCache is only invalidated if the value of the option changes.
In our case we provide additional data with the options which we use in a custom option renderer and display this data to the user.

Example: We do a faceted search and return new options which are a subset of the already selected options by the user.

The option renderer generates the following HTML:

"<span>" + item.value + " (" + item.count + ")</span>"

Initial options:

[{"value": "Tag 1", "count": 15}, {"value": "Tag 2", "count": 12}]

The user facing options in the dropdown are now:

• "Tag 1 (15)"
• "Tag 2 (12)"

User selects "Tag 1" and we do a new load of options, passing the selected options to the server. The client get's new options into the load callback to render:

[{"value": "Tag 2", "count": 3}]

The user facing options in the dropdown are now "Tag 2 (12)" and not "Tag 2 (3)" as expected, because the value of the option hasn't changed, thus the cached version of the rendered option is used.

This happens even if we call clearOptions() before passing the new items to the load callback, as clearOptions() does not clear the renderCache for options.

Workaround for load method:

selectize.clearOptions();
selectize.renderCache['option'] = {};
callback(items);

[emzyme20]

I couldn't get your workaround to work, but I modified it to this and my selectize re-renders the new list of items with my custom rendering method:

selectize.clearOptions();
selectize.renderCache = {};
selectize.load(function(callback) {
    callback(selectOptions);
 });

[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.