Adding a custom value to a multi-select

[edeesis]

Is there anyway to add a custom value to a multi-select? So the user can type whatever they want, not necessarily what's available in the list passed to the component?

[optimistex]

@edeesis Hi!
No, there is not.

I can add an event like an addNewItem(text: string) which will fire on:

• something typed
• and pressed key keyCodeToOptionsSelect (Enter by default)
• and has no item in the filtered list (It's mead that no item for selecting)

You will can process the addNewItem(text: string) and add some item from yourself.

Currently, It is just an idea. What do you think about it?

[edeesis]

Yeah, that would make sense to me. It's surprising to me how many typeahead/select2 implementations there are out there and none of them allow you to add a custom value.

What you're proposing makes perfect sense to me, you would just subscribe to that event and add it to the array. I assume it would also clear the input box like selecting an item from the dropdown does

[optimistex]

What you're proposing makes perfect sense to me, you would just subscribe to that event and add it to the array. I assume it would also clear the input box like selecting an item from the dropdown does

There are two ways:

1. You make a custom item and add it to the array of items.
2. You make a custom item and return it from the callback. The select component will receive it and automatically add in the inner array and select list.

Second way easiest for me. But I am not sure that it will use.

[ahmdrami]

Hi @optimistex ,

I was looking for similar functionality and modified the inputKeyUp event to push custom item when the item does not exist in the options array. This feature works only when @input binding is defined on the component.
What do you think of this approach?

[optimistex]

@ahmdrami It is similar to my idea but from outside. My idea is to do it from inside.

[ahmdrami]

@optimistex
In my case, I don't want every multi-select to have such feature enabled all the time. The @input binding will enable/disable it

[ert78gb]

Hi @optimistex,

Thank you for the component.

We have "custom value" use case too, but for the single select mode. I will help or implement the feature but I would be happy if we can agree in the solution before I start the implementation.

The use case:
We have a predefined list with ~250 item and we have more custom rule e.g. M{1-65535} => every element that start with M and follow a number that between 1 and 65535.
We can not put all the 100k elements in the dropdown because it is extremely slow so we needed a custom validator that returns with boolean | { id: string, text: string, optionGroupId?: string } if the typed value is valid. The custom validator should be called when defined and the current search logic does not find any value or a value assigned to the ngModel.

• If the return value is true then the typed text valid and have to create an NgxSelectOption where the value and the text properties are the typed text and it has to be add at the end of the options list . It is an optional feature.
• If the return type is a composite object then the typed value/search text is valid and it has to be the selected item. If the optionGroupId defined then have to add the new item to the option group otherwise at the end of the options list.
• If the return value is false then the typed value is invalid. It is the current logic.

If the user type M65 then the validator function will be call 3 times.

• with M and the validator function is return with false, because the simple M is invalid
• with M6 the validator function will return with { id: 'M6', text: 'Media key 6, optionGroupId: 'media'}`
• with M65 the validator function will return with { id: 'M65', text: 'Media key 65, optionGroupId: 'media'}`

The options list will contains 2 new item M6 and M65 if the user delete characters then do not have to delete the new items. The component will contains the new values until it not reinitiate.

The #193 PR contains the implementation of the multi select way. But it does not support the custom validator and pending for a while.

I am open to implement any other solution that cover our use case.

[optimistex]

@ert78gb First of all I have to point that there is a similar component with necessary feature: https://ng-select.github.io/ng-select#/tags

We have two ways:

1. You can use the component ng-select and perhaps save some time.
2. If for a reason you want the feature exactly in ngx-select-ex component, then you can add the implementation.

In case you choose the option #2 I like this approach: https://stackblitz.com/run?file=src/tags-custom-example.component.html

[ert78gb]

@optimistex Sorry for the late response but we switched to the ng-select, so I will not implement this feature