Selectize.js: allowEmptyOption does not treat empty options as normal options

[esbenp]

According to the documentation allowEmptyOption:true should enable empty value options being treated as normal options. However, it seems they are still not selectable.

This demo is taken straight out of the examples folder:

<div class="control-group">
    <label for="select-beast-empty">Beast:</label>
    <select id="select-beast-empty" class="demo-default" data-placeholder="Select a person...">
        <option value="">None</option>
        <option value="4">Thomas Edison</option>
        <option value="1">Nikola</option>
        <option value="3">Nikola Tesla</option>
        <option value="5">Arnold Schwarzenegger</option>
    </select>
</div>
<script>
$('#select-beast-empty').selectize({
    allowEmptyOption: true,
    create: true
});
</script>

Here none is not actually a clickable option. It disappears once the dropdown is activated, and thus seems more like a placeholder? Is this the wanted behaviour or did I miss something here?

[maxhungry]

I am having the same issue here, after initialise with allowEmptyOption I was expecting either one of the option below to be selectable:

<select>
  <option value>None</option>
  <option value="">None</option>
</select>

[braznaavtrav]

+1

[Matheuslucena]

+1

[vala]

+1 too, this does not seem to work.

As a workaround, we do not use the allowEmptyOption option, and use a select option with a special value <option value="__blank__">None</option>, listen to the change event on the field and reset its value if the value is "__blank__"

Note that this allows us to keep the placeholder and get the blank option treated as a real option.

Example code :

<select data-selectize>
  <option value="">Select a value ...</option>  <!-- Placeholder -->
  <option value="__blank__">None</option>       <!-- Blank option -->
  <option value="1">Actual value</option>       <!-- Real value -->
</select>

Then initialize selectize and handle the __blank__ value manually :

$field = $('[data-selectize]').selectize()

$field.on('change', function() {
  if($field.val() === '__blank__') { $field.val(''); }
});

[smoral]

+1

[federico-bellucci]

+1

[ryanmortier]

+1

[mcavalletto]

This looks like an omission in the logic added in c8f2944a0a1d13db872397623544569379f16d7b to implement allowEmptyOption.

Empty options are parsed from the original <select> tag, but then lost during the call to Selectize.registerOption().

Line 1187 of src/selectize.js should be changed:

-       if (!key || this.options.hasOwnProperty(key)) return false;
+       if (typeof key === 'undefined' || key === null || this.options.hasOwnProperty(key)) return false;

Hopefully I'll find the time soon to set up a pull request with this change.

You can monkeypatch this without modifying the original source by running this code after loading selectize.js:

    var hash_key = function(value) {
        if (typeof value === 'undefined' || value === null) return null;
        if (typeof value === 'boolean') return value ? '1' : '0';
        return value + '';
    };
    $.extend(Selectize.prototype, {
        registerOption: function(data) {
            var key = hash_key(data[this.settings.valueField]);
            // Line 1187 of src/selectize.js should be changed
            // if (!key || this.options.hasOwnProperty(key)) return false;
            if (typeof key === 'undefined' || key === null || this.options.hasOwnProperty(key)) return false;
            data.$order = data.$order || ++this.order;
            this.options[key] = data;
            return key;
        }
    });

If the text of your option is also blank, you may need to modify your CSS or rendering function to ensure that the resulting data-selectable div does not collapse down to an unusable size. I overwrote the default rendering functions as shown below:

    var originalSetupTemplates = Selectize.prototype.setupTemplates;
    $.extend(Selectize.prototype, {
        setupTemplates: function(data) {
            var self = this;
            var field_label = self.settings.labelField;
            var field_optgroup = self.settings.optgroupLabelField;

            var templates = {
                'option': function(data, escape) {
                    return '<div class="option">' + ( $.trim(data[field_label]).length ? escape(data[field_label]) : '&nbsp;' ) + '</div>';
                },
                'item': function(data, escape) {
                    return '<div class="item">' + ( $.trim(data[field_label]).length ? escape(data[field_label]) : '&nbsp;' ) + '</div>';
                }
            };
            self.settings.render = $.extend({}, templates, self.settings.render);
            originalSetupTemplates.apply(this, arguments);
        }
    });

I'm not sure whether there's a more general-purpose way of handling this aspect of the issue.

[andrefigueira]

+1

[joshstrange]

It's also ignored by the API AFAICT so passing in options with a blank string with allowEmptyOption set to true just discards it. We settled for 'none' as the value but would prefer an empty string (or null) as it's cleaner.

[joallard]

Tentative fix in a12d99f; please test on master