Kendo-angular: Adding custom value in mulstiselect when [data] is Array<number>

[destus90]

I'm submitting a...

• Bug report

Current behavior

If you have a multiselect with an allowCustom parameter is set to true and [data] is array of numbers you won't be able to add custom value

Expected behavior

Custom value should be added in select

Minimal reproduction of the problem with instructions

1. Open demo example https://stackblitz.com/edit/angular-5vgfdb-qwj3hz?file=app/app.component.ts
2. Type '-1' in input box and press Enter
3. See that custom value wasn't marked as selected

Environment

Package versions:

v.3.4.2 of dropdowns

[dimitar-pechev]

@destus90, thank you for reporting this.

The problem comes from the default valueNormalizer that the MultiSelect uses - when dealing with numbers it currently throws which is handled internally but is causing the component to discard the custom value. We'll provide a fix for that.

Note, however, that after the issue is resolved, the custom values handled by the default valueNormalizer will be strings and not numbers. As the user text is taken from an input element, it is essentially a string so converting it to a number seems impractical and error prone.

If you need the custom values to be numbers, you can plug in your own valueNormalizer function that supports this behavior. Refer to this example.

[destus90]

@dimitar-pechev, how can I use the valueNormalizer parameter depending on some conditions? For example, sometimes data = Array<number> or data = Array<string>. In the second case I don't want to use valueNormalizer. We can have two multiselects in the template of component and use ngIf dirctive. But it will cause big size of template.

[dimitar-pechev]

Just want to make it clear that a valueNormalizer is always used. If you don't define the function yourself, the component uses its own default implementation. So it's not a case of defining when to use a valueNormalizer, it's a case of what valueNormalizer function to use for that purpose.

Having said that, it depends on what exactly you are trying to achieve. What do you mean that the array can sometimes be for numbers and on other occasions for strings? If you want to implement a reusable component that wraps the MultiSelect and only initially set either your custom valueNormalizer or use the default one, you can use a ternary operator like in this example.

If you want to change the data of the component at multiple times and respectively change the valueNormalizer, it is a bit trickier. Since the default function will be overridden the first time you assign your own function, the initial implementation will be lost. If that's the behavior you are after, then you will have to implement a valueNormalizer function that handles each of your use cases - if the array is with numbers - parse the user input to a number, and if it's a string - return the string.

I would encourage you to submit a support ticket if you need further assistance on this, as the GitHub repo is really not the place for discussing specific implementations. As already mentioned, it really depends on what exactly are you trying to achieve.

[destus90]

@dimitar-pechev ternary operator is what I wanted. I tried to resolve the issue in a similar way, but couldn't get valueNormalizer with a template reference variable. Thanks for help.

[dimitar-pechev]

Fixed in the latest dev version of the DropDowns package (@progress/[email protected]).

Here's an updated example. As mentioned before, the default valueNormalizer creates the custom values as strings.

[dimitar-pechev]

Shipped with @progress/[email protected].