MultiSelect: not selecting correct value when "options" objects contain property "value"

[erik-vanlankvelt]

Describe the Bug
I am not seeing selected "values" as checked in the dropdown. When checkboxes are checked, incorrect value is returned when "onChange" is invoked. "options" objects passed in contain a property/key named "value".

Reproducer
https://codesandbox.io/s/kind-bouman-2wobns?file=/src/App.tsx

PrimeReact version
8.5.0

React version
17.x

Language
React/TypeScript

Build / Runtime
Storybook

Browser(s)
Chrome

Steps to reproduce the behavior

• Using above link to reproduce, expand dropdown. Notice that none of the checkboxes are checked.
• Select an item in the dropdown. Notice that what's populated as a selection in the input is incorrect.

Steps to reproduce correct behavior

• Uncomment out const [value, setValue] = useState(defaultValueGood);
• Comment out const [value, setValue] = useState(defaultValueBad);
• Uncomment out const optionLabel = "name";
• Comment out const optionLabel = "label";
• Uncomment out options={optionsGood};
• Comment out options={optionsBad};
• Refresh

[melloware]

Fixed your sandbox you were setting default values incorrectly: https://codesandbox.io/s/mystifying-einstein-9bezvf?file=/src/App.tsx

[erik-vanlankvelt]

@melloware I appreciate you fixing my sandbox, apologies for that. This is still an issue however. Can we reopen it?
https://codesandbox.io/s/tender-engelbart-ho1o1t?file=/src/App.tsx

[erik-vanlankvelt]

@melloware should I not be using selectedItemTemplate? I see what your change did, however, it won't work if there isn't a key of value in the options object. Is there some way to specify what the value selected should be? I would like the ability to have the value selected be the entire object, instead of a single value. Is this possible or am I confined to having to specify the value key in the options object? Thanks!
https://codesandbox.io/s/tender-engelbart-ho1o1t?file=/src/App.tsx

[melloware]

Fixed your sandbox again to use selectedItemTemplate https://codesandbox.io/s/mystifying-einstein-9bezvf?file=/src/App.tsx

[erik-vanlankvelt]

Thanks @melloware. Based on all the updates you've made in sandbox, it looks like the options object needs a value key every time. Would you please confirm if this is the case or not? See examples below. I appreciate you taking the time to review this.

For example:

This works

const optionsBad = [
  {
    label: "Enamel pin letterpress",
    value: 1
  },
  {
    label: "Farm-to-table man bun",
    value: 2
  },
  {
    label: "Plaid locavore typewriter",
    value: 3
  }
];

This will never work:

const optionsBad = [
  {
    label: "Enamel pin letterpress",
    id: 1
  },
  {
    label: "Farm-to-table man bun",
    id: 2
  },
  {
    label: "Plaid locavore typewriter",
    id: 3
  }
];

[melloware]

That will work just fine you just need to use 'optionValue="id"' to tell it to use the id field instead of default value field.

[erik-vanlankvelt]

@melloware I see, thanks! So it really boils down to the format of the value prop. It can't be an array of objects. That's what I was hoping for but sounds like that's not an option, and value should be an array of string or number.

[melloware]

I don't understand? Your use case makes no sense?

Can you update your code sandbox to show what you are actually trying to do?

You want the value to be instead of a single number and array of numbers?

[erik-vanlankvelt]

Here is my use case that works: https://codesandbox.io/s/friendly-bardeen-14m1u5?file=/src/App.tsx.

Here is my use case that doesn't: https://codesandbox.io/s/hidden-field-p7ivin?file=/src/App.tsx.

I think it is related to this line, where if the option has a value key, then it uses that instead of the whole option object.

Sorry for the confusion.

[melloware]

Yes but in your example that doesn't work you are not using "optionValue="id" to tell it to use the Id value as your option?

[erik-vanlankvelt]

In the example that doesn't work https://codesandbox.io/s/hidden-field-p7ivin?file=/src/App.tsx, setting optionValue="id" doesn't work and neither does optionValue="value".

[melloware]

Ok let me take a look. I think I see what you are saying.

[erik-vanlankvelt]

@melloware just checking in, any updates? Should I submit a PR?

[melloware]

Feel free.

[erik-vanlankvelt]

@melloware PR submitted

[erik-vanlankvelt]

@melloware @mertsincan any chance this can be added to the next release?

[melloware]

I was waiting for PrimeTek to review before merging.

[erik-vanlankvelt]

Awesome, thanks! I wasn't sure what your process was, so just checking in.

[erik-vanlankvelt]

@mertsincan is there any particular reason why this is not being included in releases? I can't use this project without this change being released and may have to use a different library if this isn't going to be released soon. Thanks

[melloware]

@erik-vanlankvelt sent you a note in your PR there is a merge conflict.

[erik-vanlankvelt]

@melloware I mucked up the git history so created a new PR for this that's clean. I'm sorry for the inconvenience.
#3613

[melloware]

Thanks for the PR! Merged.