How to keep the value of MultiSelectComponent properly

[Steffen Harbich]

Hi,

please see the example: https://stackblitz.com/edit/syncfusion-multi-select-issue-2?file=index.js

When I select any value then the selected value appears twice in MultiSelectComponent. What am I doing wrong here? My goal is to have a tag input where also custom tags can be added beside existing tags. For new tag names I would like to trim whitespaces, i.e. the entered name will not always match the tag name I add.

Regards, Steffen Harbich

[Berly Christopher]

Hi Steffen, 

  

Greetings from Syncfusion support. 

  

We were able to reproduce the reported issue. So, we will validate and update the further details in two business days (29^th June 2021).  

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Steffen, 

  

Thanks for the patience. 

  

We have checked the shared sample. We could not assign the values in object type since there is no object type support for the value property in the multiselect component. We have already considered this as a feature at our end. Please track the status of this feature from the below feedback. 

  

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

  

So, we suggest you to assign the value directly as mentioned in the below code example. 

  

function onChange(e) { 

    setSelected(e.value); 

  } 

return ( 

    <p> 

      <MultiSelectComponent 

        dataSource={ds} 

        fields={{ text: 'name', value: 'id' }} 

        allowFiltering={true} 

        filterType="Contains" 

        sortOrder="Ascending" 

        showClearButton={true} 

        allowCustomValue={true} 

        value={selected} 

        changeOnBlur={false} 

        change={onChange} 

        removed={removeTag} 

      /> 

    </p> 

  ); 

} 

 

 

  

Please find the modified sample below. 

Sample: https://stackblitz.com/edit/syncfusion-multi-select-issue-2-csniv9?file=index.js  

  

Regards, 

Berly B.C 

[Steffen Harbich]

Ok, the "change" event is somehow better as it does not produce the behavior of duplication. Will the actual bug be fixed?

And how can I implement that new values (entered by user) are recognized and stored within the react state?

[Sevvandhi Nagulan]

Hi Steffen, 

Query 1: Ok, the "change" event is somehow better as it does not produce the behavior of duplication. Will the actual bug be fixed? 

The value property accepts the type of string[] or number[] or boolean[]. But in the previous code, you have pushed the object to the state variable and bound to the value property of component. Hence the reported issue occurred. So, we have already considered the reported requirement as a feature at our end and it will be included in the any of the upcoming releases. Please find the feedback link below. 

Feedback link: https://www.syncfusion.com/feedback/26635/ 

Query 2: And how can I implement that new values (entered by user) are recognized and stored within the react state? 

You can get the custom values in the change event of multiselect component and push that value to state variable.  In the already provided sample, the custom value is added to the state variable and you can see that by printing the value in the console. Refer the below sample. 

Sample link: https://stackblitz.com/edit/syncfusion-multi-select-issue-2-csniv9?file=index.js 

Regards, 

Sevvandhi N 

[Steffen Harbich]

Query 1: Please have a look at my original example. I did not bound the complex object to the MultiSelect. Instead I bound the ID (if it was an existing object) or the name (if it was a newly entered tag). IMO it is a bug and should be fixed.

Query 2: The printed value in console is probably randomly generated ID of a new value (non existing before). How does that help me? I need the text of the new value.

[Sevvandhi Nagulan]

Hi Steffen, 

Query 1: Please have a look at my original example. I did not bound the complex object to the MultiSelect. Instead I bound the ID (if it was an existing object) or the name (if it was a newly entered tag). IMO it is a bug and should be fixed. 

We checked the original sample given by you. In the sample, you have bound the state variable to component and printed the value of that variable in the console.  The state variable holds the value of type of array of objects and not the type of string array or int array. Please refer the below screenshot. 

 

Query 2: The printed value in console is probably randomly generated ID of a new value (non existing before). How does that help me? I need the text of the new value. 

You can get the text of newly added item using customValueSelection event. Please refer the below code and sample. 

function customValue(e) { 

    console.log(e.newData.name); 

} 

Please find the sample below. 

Sample link: https://stackblitz.com/edit/syncfusion-multi-select-issue-2-cmhlhn?file=index.js 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N 

[Steffen Harbich]

Hi,

regarding query1: I did not talk about the state variable. See the code:

<MultiSelectComponent

...

        value={selected.map(tag => (tag.id === null ? tag.name : tag.id))}

...

      />

Clearly, the state variable isn't bound directly to the component but mapped to name (string) if it is a new tag and to id (number) if it is an existing tag.

Regards, Steffen

[Sevvandhi Nagulan]

Hi Steffen, 

We are currently validating the reported requirement at our end. We will update further details on 13^th of July,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Berly Christopher]

Hi Steffen, 

  

Sorry for the inconvenience caused. 

  

We need two more days to validate the issue at our end. So, we will update the further details on 15^th July 2021. 

  

Regards, 

Berly B.C 

[Sevvandhi Nagulan]

Hi Steffen,  

   

Sorry for the inconvenience caused.  

   

We request that to use the workaround solution which we provided already. We need two more days to validate the issue at our end. So, we will update the further details on 20th July 2021.  We appreciate your patience until then. 

   

Regards,  

Sevvandhi N 

[Sevvandhi Nagulan]

Hi Steffen, 

Thanks for your patience. 

We considered the reported issue as a bug at our end. We will include the fix for the reported issue in the upcoming patch release which is scheduled to be roll out by 20h of July,2021. We appreciate your patience until then.     

You can track the status of the reported issue from the feedback link below. 

Feedback link: https://www.syncfusion.com/feedback/27205/ 

Until then, we suggest that you to remove the value property which you bound the to the component. Because this will again re-render the component. In built we maintained the value property with updated value. 

Regards, 

Sevvandhi N