Choices: Allow options with no value

[philippkuehn]

Hey, I want to use an option with no value as a placeholder. But this doesn't work. The option will not be visible with choices.js.

<select>
  <option value selected>Please Choose…</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

The select is empty and I'm not able to select this field anymore.

This is valid HTML so I'm a bit confused why this isn't working.

[jshjohnson]

Hi,

Out of interest, if you pass a value to the placeholder option, does this work?

If so, this will be a really easy fix.

Thanks

[philippkuehn]

No, unfortunately not 🙁

[jshjohnson]

I'm working on a fix that accepts a blank value attribute. That being said, what do you think the expected behaviour should be for placeholder items? Should they behave like disabled options or should they not appear in the dropdown list at all?

Thanks :)

[philippkuehn]

That's a tough question. I think you always have to think about accessibility. Custom selects should work 100% if I drop all the javascript stuff.

So what I want is a javascript and non-javascript solution to:

• have a placeholder with no value
• after selecting some value I want to be able to re-select the placeholder value (for non-required selects)

So maybe you don't have to change the way choices works with empty values, if the placeholder options works properly. In #53 there is a nice suggestion to fix the current issue with the placeholder option:

const choices = new Choices(elements, {
    placeholderValue: 'Please Choose…',
    searchPlaceholderValue: 'Search…',
    removeItemButton: true,
}

Or maybe you could do something like this to recognize a placeholder option (the placeholder should not be in the dropdown):

<select>
  <option value data-choices-placeholder>Please Choose…</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

In general I don't think it's a good idea that placeholder items behave like disabled fields because not all selects are required fields and otherwise you are not able to un-select an already selected field.

What do you think? 🤔

[lewishowles]

Just to jump in here, found this recently after trying to move a new project to Vue.js and loving it so far. I came from using Selectize in a previous project and I'm having a much better time. (I had to re-write the CSS but that's just because I like to make things difficult!)

Jumping in with some opinions on this:

• Agree accessibility is paramount. The 'please select' choice should really be in the vanilla select box.
• Also agree it should be there in the dropdown as a choice - because someone might have selected a value incorrectly and not actually know the answer to what you're asking
• It should always appear first in the list, even with sorting.
• Perhaps it should get its own class, so we can style it differently (e.g. choices__item--placeholder
• The complex part is what happens if there are multiple empty value choices. I think it should probably be allowed, and all behave the same - i.e. all appear at the top (sorted or not depending on options), all with the placeholder class.
• For multi-select, I'm thinking the empty choice shouldn't appear in the dropdown, and should just be a placeholder visible in choices__inner if there is no selected item, while all but the first empty choice are ignored (as it doesn't make sense to me to have multiple empty choice in this sense, as reverting to an empty state is just a case of deleting the choices)

[jshjohnson]

Thanks for all your feedback. I think I'm going to experiment with using the placeholder attribute on option elements and then adding a placeholder class based on the existence of that attribute. This would be for single select elements only though as I don't think this is necessary for multiple selects as you can set the placeholder on the input.

[jbanety]

Hi,
It's also important to keep option with empty values in the list.
For example, I'm using empty values in select to filter records in DB.
Empty values are for setting my filter to "ALL RECORDS PLZ" with no filter...

Looks like this :
State :

• Archived (value = -1)
• Deleted (value = -2)
• Published (value = 1)
• Unpublished (value = 0)
• All (value = '')

I haven't any placeholder. The current value is always selected for the filter.

[zslabs]

Will be watching this one closely, great ideas everyone!

[jshjohnson]

Plan:

• [x] Allow options with no/empty values (but with a label - single/multiple select)
• [x] Remove current implementation of single select placeholders (single select only)
• [x] Set class based on options with a 'placeholder' attribute (single select only)
• [x] Style placeholder class (single select only)
• [x] Order placeholder item first in list

[jbanety]

👍

[zslabs]

@jshjohnson Any testing I can do to help out with this one? Thanks!

[jshjohnson]

Hi @zslabs,

I'm uber busy at the moment at work - I don't think I'm going to make much progress on this until after New Year. I'm happy to review any pull requests though.

Apologies!

[anthonyav]

@jshjohnson Hello did you you have time since your last comment?

[jshjohnson]

I have implemented all parts of this feature besides forcing a placeholder to appear first in the choice list.

Experiment on the following branch: git/feature/select-placeholders

[benjaminprojas]

I'm looking forward to this update! Glad to see its being actively worked on.

[adammockor]

So, what needs to happen to get this done? I am willing to help with this if it's possible.

[jshjohnson]

Hi @adammockor,

See my comment here: https://github.com/jshjohnson/Choices/issues/77#issuecomment-274504748

Any help would be appreciated :D

[jshjohnson]

Thanks to @adammockor, placeholders are now appearing first!

It would be really good if people could test feature/select-placeholders and flag any issues before I draft a new release.

Thanks

[adammockor]

So maybe some kind of prerelease could help with testing?

[jshjohnson]

Good idea, pre-release can be found here: https://github.com/jshjohnson/Choices/releases/tag/v3.0.0-beta

[adammockor]

I was thinking more like npm release. Although you can point package.json to specific tag in git, there is missing new build. So it's not easily pickable.

[chopfitzroy]

Hey @jshjohnson,

Looking at the new release will it be possible to set a placeholder via the config object passed to new Choices? I am working with some CMS generated forms and adding a literal placeholder option to the select is proving to be a mission.

Cheers.

[jshjohnson]

@CrashyBang You can do that already via the placeholderValue config option :)

[chopfitzroy]

Hey @jshjohnson,

Sorry I should have explained myself a little better, I am currently using the placeholderValue to set the text on the dropdown search input :).

What I am after is the placeholder="This is a search placeholder" functionality used on the first Single select input example, is it possible to do this via the config object?

Cheers.

[jshjohnson]

@CrashyBang Ah I see what you mean. There was a good suggestion here to make a new config option where you can define the placeholder of the search input separately. I'll look into this!

[rafaelrenanpacheco]

Hi there!

Is there any progress on this issue?

Being able to set the searchPlaceholderValue will be a good addition to this project. So far the search text must be the same as the input placeholder, which isn't very user friendly.

Best regards,
Rafael Pacheco.

[jshjohnson]

Hi all!

As of version 3.0.0, Choices now supports setting an option with no value as a placeholder (info here) as well as a searchPlaceholderValue config option!

Sorry for the long wait 🙈

Thanks for your help

[travist]

We also may need this pull request, which provides a pseudo-placeholder for single selects.

https://github.com/jshjohnson/Choices/pull/248