Is there a way to keep "empty option" (the one that is used by selectize for placeholder attribute) in dropdown?

[glock18]

Hi Brian!

First off - thank you for this great plugin!

At the moment I'm trying to embed selectize to our project in place of most select boxes. I've faced some issues while trying this, most of them I've managed to fix using css, but the one I didn't resolve so far is mentioned in title of my issue.

Currently once user picks any option, the only way they can clear the input I'm aware of is by pressing backspace. It seems a bit devious (user-unfriendly) to me when it comes to a non-autocomplete type dropdown, and many might never think about this possibility to clear the field value. Therefore my question: is there an existing way to keep option with value="" in my selectize dropdown (not multiple) to provide an intuitively clear way to clear input value. I believe value="" is often used in filter forms as "Any of options below".

Thanks for your help in advance!

[msurguy]

Having the same question...

[jackmcdade]

Same here.

[davidpanzarella]

Same here. In my case i have a multi-select using the plugins: ['remove_button','drag_drop']. Removing an item up to the last one, works as expected either by click on the x or using backspace. However, when you get to the last item in the box, and click x, it doesn't actually remove it from the select list. However, click backspace and it does! However..... in both cases, it does not set any option value="" to the select, which is what we need to remove it from that field, and set it back to a null select.

Can this be done via a callback? It seems that it should be built in functionality, but may be a bug?

Any thoughts?

[net-Sense]

Same thing here, seems weird not to be able to have a blank option at least.

[h0jeZvgoxFepBQ2C]

Yeah this sucks... Anyone found a solution for this?

[gustavohenke]

I'm also looking for an answer!

[jackmcdade]

For such a fundamental use case for select boxes, it's amazing this issue has been open and unanswered for this long. Thinking about dropping this plugin from my toolbox.

[gustavohenke]

The only way I found so far is to use multiple select, with maxItems option set to 1 + remove_button plugin. But that's too much overhead for such a simple issue, I believe.

[prgwiz]

Around line 1601 comment out the "if (value) {" so that a blank value will load:

                self.createItem();
            } else {
                value = $target.attr('data-value');
                //if (value) {
                    self.lastQuery = null;
                    self.setTextboxValue('');
                    self.addItem(value);
                    if (!self.settings.hideSelected && e.type && /mouse/.test(e.type)) {
                        self.setActiveOption(self.getOption(value));
                    }
                //}

            }
        },

Around line 2999 this will all you to click a blank value remove "if (!value.length) return;"

                $option = $($option);
                value = $option.attr('value') || '';
                //if (!value.length) return;
                // if the option already exists, it's probably been
                // duplicated in another optgroup. in this case, push

[prgwiz]

Also need to allow typing without pressing the backspace on a blank value:
Add the following to the isFull function: if (this.items.length == 1 && this.caretPos == 1 && this.items[0] == "") {return false};

        isFull: function() {
         if (this.items.length == 1 && this.caretPos == 1 && this.items[0] == "") {return false};
            return this.settings.maxItems !== null && this.items.length >= this.settings.maxItems;
        },

[gustavohenke]

Do I need to say that modifying 3rd party sources is a bad choice?

[GTCrais]

+1, have the same issue. Will try prgwiz's solution.
Edit: Well, that didn't work for me =/ Looking for an update on this issue...

[dylanbromby]

First, I totally understand it's our choice to use this lib/plugin. However, it's a significant UX oversight to disallow (intentionally or not) selection of an empty value. The issue for us is if you select a non-empty value, you can't then select the empty one.

[esbenp]

+1, this missing option makes it hard to use selectize.js in a production environment.