Custom value is interpreted as ID number

[Steffen Harbich]

Hello,

please see my example at https://stackblitz.com/edit/syncfusion-multi-select-issue-1 and reproduce the issue with following steps:

1. Select from MultiSelect the entry "Game 1"
2. Click remove icon of "Game 1" => this works as expected
3. Enter text "1" (without quotes) in MultiSelect and hit ENTER => this works as expected, the "1" is shown as custom value chip
   
4. Click remove icon of "1" => the log shows the event data of removed event which contains "itemData" as { Game: 'Game 1', Id: 1 } which is wrong because you entered a custom value "1" instead of selecting "Game 1"
5. Enter text "11" (without quotes) in MultiSelect and hit ENTER => this produces an error (I suspect it is interpreted as number and their is no entry/item with ID 11)

Observed in 18.4.x. The behavior for 18.2.x is different but also wrong as after step 5 removing the chip produces an "undefined" itemData in removed event.

Is there a workaround available that works for 18.2.x?

Regards,

Steffen

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Steffen, 

Greetings from Syncfusion support. 

We have checked your query. We would like to thank your for spending your time to customize the sample and helping us to understand the issue much better. We would like to let you know that every value of Multiselect will be added and removed based on the value provided in the fields property and the popup value is filtered based on the text property. According to your case, you have given ID as fields property which holds the value 1 and 2. Therefore, removing the custom value 1 considered as the datasource’s value. However, you can handle this scenario with the help of predicate in filtering event which will not consider 1 as custom value. Please find the modified sample below in v18.2.

Sample Link : https://stackblitz.com/edit/syncfusion-multi-select-issue-1-zvzupw 

Code Snippet:


 

<MultiSelectComponent 

        dataSource={[{ Game: "Game 1", Id: 1 }, { Game: "Game 2", Id: 2 }]} 

        fields={{ text: "Game", value: "Id" }} 

        allowFiltering={true} 

        filtering={args => { 

          args.preventDefaultAction = true; 

          var predicate = new Predicate("Game", "contains", args.text, true); 

          predicate = predicate.or("Id", "contains", args.text, true); 

          var query = new Query(); 

          query = args.text !== "" ? query.where(predicate) : query; 

          args.updateData( 

            [{ Game: "Game 1", Id: 1 }, { Game: "Game 2", Id: 2 }], 

            query 

          ); 

        }} 

        allowCustomValue={true} 

        removed={e => console.log("rem: ", e)} 

      /> 

 

Also, when typing the custom value returns null in the itemdata, if we bind the value as integer type. We have considered this as bug in our end. This will be included in patch release which is expected to be rolled out on April 14, 2021. You can track the status of the issue using below feedback link. 

Feedback : https://www.syncfusion.com/feedback/23392/ 

We appreciate your patience until then. 

Regards, 

Jeyanth. 

[Ella Helga]

An interim workaround for version 18.2.x might Sprunked  involve intercepting the removal event and filtering id data. Custom mapping logic in the removal callback can bypass the mismatched chip ID issue.

[Priyanka Karthikeyan]

Hi Steffen Harbich,

As per our Product Life Cycle , version 18.2.X is under limited support. We typically don't backport solutions to versions under limited support because in the 8 major version releases and more service packs since then, there are a lot of dependencies and core changes that we have to consider. 

However, we strongly recommend upgrading to the newer version as we may not be able to offer the level of support you expect for version 18.2.X.

 

If the issue persists after upgrading, please provide us with a sample project that replicates the issue, along with the steps to reproduce it. This will help us investigate the problem further and provide you with a resolution.

Regards,

Priyanka K