Provide option to add no-value choice

[just-boris]

Angular.js select directive have a convenient way to define null-value option. If you put <option> tag without value inside <select>, it will be treated as null-option which sets model value to null.
It is useful sometimes to provide user ability to reset selected value. Now I have to implicitly add that item to other choices in repeat.

$scope.persons = [{"id": null, "name": "No person"}].concat(otherPersons)

<ui-select ng-model="form.person">
    <ui-select-match placeholder="Select person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person.id as person in persons">{{person.title}}</ui-select-choices>
</ui-select>

I don't want to do it and it would be good if you will have an option for provide this option through html, for example

<ui-select ng-model="form.person">
    <ui-select-match placeholder="Select person...">{{$select.selected.name}}</ui-select-match>
    <ui-select-null-choice>No person</ui-select-null-choice>
    <ui-select-choices repeat="person.id as person in persons">{{person.title}}</ui-select-choices>
</ui-select>

It is similar to select directive logic and looks good for me. What do you think?

[erobwen]

I agree, and in addition I would also like an "x" button, even when in single select mode to reset the ui-select to this "empty choice". Is there currently any way to have the "x" button in single select mode?

[just-boris]

@erobwen you can put clear button inside <ui-select-match />

[erobwen]

just-boris: Is there an example of how to do it?

[amcdnl]

Why not just use clear? #287

[just-boris]

@amcdnl it could be helpful, but it is not quite suitable for me.
My use-case of ui-select is a filter of persons. So, user can select some person or select option "Any person" that's means null
It couldn't be solved by the clear button, because user would see a placeholder "Select person..." instead of actual meaning "Any person"

Here is a plunkr of that what I want to get

[erobwen]

amcdnl: I try to use it with the bootstrap theme (downloaded latest ui-select with bower). Maybe there is something wrong with my setup, or is it not compatible with the bootstrap theme? But I get no result from using "allow-clear", no clear button appears?

Another wierd thing is that "propsFilter" from your plunker does not work on my version, I have to type "filter" and only filter on one single property for it to show any items in the dropdown.

[jstoneky]

@erobwen - Just to clarify, in their plunker they have implemented the propsFilter in their controller. So if you didn't also implement it, then you wouldn't be able to use it. 'filter' is a default filter provided by ng.

[lifehackett]

Does it need to be another directive? Personally, I'd like to move away from so many directives and attributes and more towards a configuration object that could be passed in. This would make it more dynamic.

[just-boris]

@ken4z where you will store that configuration object?
When you are using a directive, you can configure your controls just in markup and you can see configuration right in that place where it will be used.
So I vote for the declarative way through directives

[lifehackett]

There would still be a directive, but the null value display name could just be passed in.
<ui-select-choices null-label="No person"></ui-select-choices>

Instead of making it an additional attribute though, I'd rather have something like

<ui-select ng-model="form.person" options="options">
    <ui-select-choices repeat="person.id as person in persons">{{person.title}}</ui-select-choices>
</ui-select>

where options is something like

options = {
  multiple: false,
  placeholder: 'Select person...',
  nullLabel: 'No person',
  searchEnabled: false,
  selectedDisplayProperty: 'name'
}

We have a lot of selects that are fairly similar so I'd like to have a wrapper for ui-select that encompasses this commonality with data to change the behavior, changing the properties of an object is easier than adding/removing/manipulating html. But perhaps there is a way you achieve this that I am not aware of.

[FFelling]

+1 For this feature (in combination with bootstrap theme).

[shlensky]

+1

[antonchaika]

+1

[ErikSvedin]

+1

[kjim]

+1

[alonn24]

+1

[jasny]

+1

[fantasia949]

+1

[Anton-Nikishkin]

+1

[akirich]

+1

[veob]

+1

[kunashir]

+1

[Blarm1959]

+1

[dlukez]

Guys, check this out and tell me if it suits your needs... http://plnkr.co/edit/7nmBRicsmH33E55sSomz

edit: jumped the gun, doesn't really add much to what's been discussed above. An interesting consideration is whether or not we'd want to filter to the null option using the search criteria. If so, it would have to be included in the repeat expression array since that's where the filtering occurs.

[Reklino]

That solution looks great to me. In my opinion, it would be best if the null option is not filterable. That way there is always a way to set the box back to null.

[akirich]

absolutely you are right
null option should be always selectable

On 25 February 2015 at 14:39, Jacob [email protected] wrote:

That solution looks great to me. In my opinion, it would be best if the
null option is not filterable. That way there is always a way to set the
box back to null.

—
Reply to this email directly or view it on GitHub
#302 (comment)
.

[dlukez]

@akirich so are you saying that you believe the null option and the clear button should do the same thing?

@FFelling As it stands, the code I've written isn't really adding a lot of support for null option stuff considering that the user still has to specify it in their collection. Perhaps I'll modify the functionality so that:

1. If the null option doesn't exist in the original collection, it will be added to the dropdown without modifying the original collection. In this case, the option won't be filterable.

2. If the null option does exist in the original collection... Well, we just leave it, but transform the model value to null instead of the null option descriptor. The developer can then implement filtering however they like.

As far as displaying the null option is concerned (i.e. "Please select XYZ"), I am leaning towards reusing the template provided inside the choices element to provide the most flexibility. I've had templates that are quite complex and would require control over how the null option is displayed (it wouldn't just be a string). In this case, if the items in the original collection were just strings I could write null-option="Please select XYZ", however if they were objects of the form { id: 1, name: "Item" } and the template was {{ item.name }}, I would need to specify null-option="{ name: 'Please Select XYZ' }".

I am not clear yet on the best relationship between the clear button and the null option... Any thoughts?

[akirich]

yes. I believe clear button (which would set value to null) and placeholder
text for null value would solve this better than adding null-value option
into options list (and dealing with filterable / not filterable null-value
option)

On 26 February 2015 at 14:57, Daniel Zimmermann [email protected]
wrote:

@akirich https://github.com/akirich so are you saying that you believe
the null option and the clear button should do the same thing?

@FFelling https://github.com/FFelling As it stands, the code I've
written isn't really adding a lot of support for null option stuff
considering that the user still has to specify it in their collection.
Perhaps I'll modify the functionality so that:

1. If the null option doesn't exist in the original collection, it will be
   added to the dropdown without modifying the original collection. In this
   case, the option won't be filterable.

2. If the null option does exist in the original collection... Well, we
   just leave it, but transform the model value to null instead of the null
   option descriptor. The developer can then implement filtering however they
   like.

As far as displaying the null option is concerned (i.e. "Please select
XYZ"), I am leaning towards reusing the template provided inside the
choices element to provide the most flexibility. I've had templates that
are quite complex and would require control over how the null option is
displayed (it wouldn't just be a string). In this case, if the items in the
original collection were just strings I could write null-option="Please
select XYZ", however if they were objects of the form { id: 1, name:
"Item" } and the template was {{ item.name }}, I would need to specify null-option="{
name: 'Please Select XYZ' }".

I am not clear yet on the best relationship between the clear button and
the null option... Any thoughts?

—
Reply to this email directly or view it on GitHub
#302 (comment)
.

[dlukez]

@akirich isn't this what allow-clear on ui-select-match does?

[akirich]

yes ! it didn't work for me as I've found we already have modified
template...
checked on the demo page - it works, this is exactly what I've had in mind !

On 26 February 2015 at 15:19, Daniel Zimmermann [email protected]
wrote:

@akirich https://github.com/akirich isn't this what allow-clear on
ui-select-match does?

—
Reply to this email directly or view it on GitHub
#302 (comment)
.

[FFelling]

This issue has some history. Some time ago there was no generic way to clear ui-select when using the bootstrap template. There was no clear button and no null option. The only option was to add a null-item to the data collection prior to binding.

The clear button has since been added and works as expected.

We still would like to have a null option that is not part of the original data collection. When it is specified and you press the clear button the null option should be selected when present.

I like @dlukez proposed solution (null-option="{ name: 'Please Select XYZ' }") for it's flexibility.

[pgrm]

I'm currently using the placeholder to specify the description of the null option, but it is a bit weird, would really like to have an explicit null-option

[idoo]

+1

[kr4ng]

I am trying to figure out how to use ui-select to emulate google style search (i.e., where the user can search any string they want or select something from the menu in the dropdown). Is this possible? right now, I can only get onselect function to trigger when i select an item from the menu and not when they just type in a random string that doesn't match anything.

[stevematyas]

Will the null-option support be included for a multiple select?

[nullpunkt]

+1

[burzum]

+1

[reyx]

+1

[landasystems]

+1

[jraguilo]

My problem with the allow clear button is that if I were to use only keyboard, I would have no way to clear the value in my dropdown, but if we had a null option, then I could simply delete my search text and choose my null option.

[jtrancas]

+1

[nadavsinai]

+1

[soichih]

+1

[jitendersandhu]

+1

[jefersondaniel]

+1

[PavelKonon]

+1

[LeleDev]

+1

[just-boris]

Hello, folks. I tried to implement this feature, but it is more complicated that it seemed initially.

ui-select has very difficult transclusion logic, so I can't insert one more nested directive and inject it into dropdown.

Also, I found a fix in a related project: RenovoSolutions/TypeScript-Angular-Components#91. Here it was done via extra configutation option for main directive itself. Maybe we here should do the same.

[jibusayone]

Is this allow-clear option a newly added one ? For me, adding allow-clear="true" doesn't make any effect. I am using ui-select theme select2 3.5.1.

[just-boris]

@jibusayone allow-clear option should be added to <ui-select-match> element, not <ui-select>.

[jibusayone]

Thanks for the comment @just-boris

I just found out the issue. It was the version which was causing the problem.
But I don't want to upgrade to the latest 0.13.2 where my current design gets affected. Does anyone know in which update the allow-clear feature was included?

[wesleycho]

Closing as a duplicate of #152 - this issue has too many +1s which has made this a noisy issue to read, and #152 proposes a nice solution to this problem.

[MyEidos]

Could someone clarify, this thing is not ready yet? I need the same thing that in OP post, a way to add "-- please select--" option to dropdowns.