Render function not working in single select mode

[stgeorge]

Using Selectize 0.11.0, I attempted to use a render function:

<select placeholder="Select Item" selectize="{ tabOnSelect: true, render: { item: RenderItem, option: RenderItem } }" ng-model="SelectedItem" ng-options="p.Id as p.Name for p in Items | filter:{ OtherId: OtherId }:strict track by p.Id"></select>

The object for the option sent to the render function had an unexpected numeric value in it, rather than the expected actual Id.

I traced it down to the selectize.load in updateTimer, it was setting index to value. I changed it to set getOptionValue(option) to value and the index to $order (which appears to be an internal to Selectize.js value which is used for default sorting based on natural order of the list).

A companion change to getSelectedItems to store the optionValue instead of the index.

I haven't tested these changes with multiple mode, but they seemed to work for me in single mode.

[EvanOxfeld]

@stgeorge Thanks for the issue report!

I assume fixing filter expressions uncovered this problem -- I've yet to have an issue with a render function without a filter. I may not be able to resolve this one right away. I still need to figure out what your proposed fix impacts. A pull request is of course welcome if you have the time. 💖

[stgeorge]

I'll look into making another pull request. Does your render function use the value part of the object being passed in or just the text part? I am using the following ng-options format:

t.Id as (t.A + ' ' + t.B) for t in List track by t.Id

So I was expecting Id in the value field that I needed to do a lookup, but was getting a number.

An alternative option would be to save the option context as $option or something and this will then get sent into the render function which allows you full access to the entire data row from the original array... I'll think about this one some more but might be a more powerful way to customize the render without much fuss.