Selectize.js: lockOptgroupOrder breaks onChange

Created on 3 Feb 2015  路  9Comments  路  Source: selectize/selectize.js

Using selectize 0.12.0, with lockOptgroupOrder: true, firing an onChange event returns the following error:
TypeError: t.optgroups[b] is undefined on line 2129 var b_order = self.optgroups[b].$order || 0;

bug cause known

Most helpful comment

After some troubleshooting, I realized that this error occurs when one or more items in the options data contains an empty (or falsy) value for the field being grouped by (specified by optgroupField).

For example, modifying one of the optgroup examples under selectize.js/examples/optgroups.html, the following scenario would result in that error:

options: [
    {class: 'mammal', value: "dog", name: "Dog"},
    {class: 'mammal', value: "cat", name: "Cat"},
    {class: 'mammal', value: "horse", name: "Horse"},
    {class: '', value: "kangaroo", name: "Kangaroo"},
    {class: 'bird', value: 'duck', name: 'Duck'},
    {class: 'bird', value: 'chicken', name: 'Chicken'},
    {class: 'reptile', value: 'snake', name: 'Snake'},
    {class: 'reptile', value: 'lizard', name: 'Lizard'},
],
optgroups: [
    {value: 'mammal', label: 'Mammal', label_scientific: 'Mammalia'},
    {value: 'bird', label: 'Bird', label_scientific: 'Aves'},
    {value: 'reptile', label: 'Reptile', label_scientific: 'Reptilia'}
],
optgroupField: 'class',
lockOptgroupOrder: true

The option {class: '', value: "kangaroo", name: "Kangaroo"} causes the error, since its value for the class field (which is the field being grouped by) is empty/falsy.

For now, a workaround that doesn't require modifying the selectize source, would be to ensure empty/falsy values of the field being grouped by are converted to something non-empty (say 'other'). Then you could perhaps define another optgroup to contain the 'other' options. The kangaroo option above would end up being {class: 'other', value: "kangaroo", name: "Kangaroo"}.

All 9 comments

Facing the same issue here

Happens if one of the optgroups is an empty string. Not a bug in selectize.

Cannot read property '$order' of undefined
Yes there is bug. i checked very carefully, optgroups had no empty string

After some troubleshooting, I realized that this error occurs when one or more items in the options data contains an empty (or falsy) value for the field being grouped by (specified by optgroupField).

For example, modifying one of the optgroup examples under selectize.js/examples/optgroups.html, the following scenario would result in that error:

options: [
    {class: 'mammal', value: "dog", name: "Dog"},
    {class: 'mammal', value: "cat", name: "Cat"},
    {class: 'mammal', value: "horse", name: "Horse"},
    {class: '', value: "kangaroo", name: "Kangaroo"},
    {class: 'bird', value: 'duck', name: 'Duck'},
    {class: 'bird', value: 'chicken', name: 'Chicken'},
    {class: 'reptile', value: 'snake', name: 'Snake'},
    {class: 'reptile', value: 'lizard', name: 'Lizard'},
],
optgroups: [
    {value: 'mammal', label: 'Mammal', label_scientific: 'Mammalia'},
    {value: 'bird', label: 'Bird', label_scientific: 'Aves'},
    {value: 'reptile', label: 'Reptile', label_scientific: 'Reptilia'}
],
optgroupField: 'class',
lockOptgroupOrder: true

The option {class: '', value: "kangaroo", name: "Kangaroo"} causes the error, since its value for the class field (which is the field being grouped by) is empty/falsy.

For now, a workaround that doesn't require modifying the selectize source, would be to ensure empty/falsy values of the field being grouped by are converted to something non-empty (say 'other'). Then you could perhaps define another optgroup to contain the 'other' options. The kangaroo option above would end up being {class: 'other', value: "kangaroo", name: "Kangaroo"}.

This will also happen if you have create: true.
When you create a new element, that element gets no class in this case, which will cause the same exact error.

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.

I don't want to be a party pooper here, but you close issues as stale because the library is not being maintained. You might as well close everything by now.

@jsgoupil that's partially the point. the library is once again being maintained; in order to prioritize things properly we need a hard reset. if this is an issue you would like to see re-opened please let me know. or even better. if you would like to take it on and submit a PR that would also be fantastic.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Trevald picture Trevald  路  14Comments

AndyBean picture AndyBean  路  15Comments

andreypopp picture andreypopp  路  15Comments

CarlosLlongo picture CarlosLlongo  路  18Comments

andriijas picture andriijas  路  21Comments