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.

[bkosborne]

I'm confused why this was closed? That referenced issue seems unrelated

[esbenp]

@bkosborne This issue is NOT closed. The above notification is a reference, telling us that this issue is referenced in another issue (which is closed).

[bkosborne]

Oops! misread that part. Thanks

[GTCrais]

in theory you could just have (option value="empty_option")-(/option) then handle it with PHP or whatever, but that's hacky =/

[mudassir0909]

I stumbled upon this issue & created a plugin for it, Here is the gist, @brianreavis please let me know if this makes sense so that I can generate a pull request for this plugin

Fiddle

[esbenp]

@mudassir0909 , thank you. This works well so far after briefly testing. It even seems to work with optgroups and multiple select! +1

[mudassir0909]

I've also created a clear_selection which extends the dropdown_header plugin which is much nicer alternative to clear selection, instead of both placeholder & backspace.

Fiddle

[GTCrais]

@mudassir0909 your solution works great, thanks!

[mcNux]

I really don't think this should be the default behaviour of the plugin. Firstly, no modern browsers appear to use this behaviour; the 'placeholder label option' is selectable in all browsers as far as I am aware. And second, even if they did use this option as the placeholder, it should only occur when the select meets a whole bunch of other requirements, including being required and not multiple, according to w3c.

It's really a shame as I otherwise really like this plugin. Please fix it.

[spenat28]

So? Can You @brianreavis at least respond to us?
Solution is simple, we need that option, and I don't want create fork just because of such a small option.

[gustavohenke]

This is the most commented issue in the repository, and it's not even labeled 👎

[brianreavis]

Guys... this is an independent library – I have and always will be maintaining it in my free time. Sorry for not responding on this, but, the entitlement in this thread is getting crazy. This is OS software, fork and PR (or offer good feedback like @prgwiz @mudassir0909) instead of complaining, please?