Dropdown: When the options object has a field named value, the selected value automatically takes the value of that field instead of the entire object

[mohamadbdeir]

Describe the bug

When the options objects for the Dropdown have a field named 'value' the selected value would use that as a value instead of the entire object. I'm not sure if that is a mistake or done on purpose but seems odd .

Reproducer

https://stackblitz.com/edit/stackblitz-starters-kmdg5m?file=src%2FApp.tsx

System Information

"primereact": "10.0.9"

Steps to reproduce the behavior

Use the dropdown component, you can try and copy the one from the documentation, rename any field of the options objects and give it the the name 'value' and you will see that the selected value for the dropdown takes that value instead of the entire object

Expected behavior

It should define the selected value as the entire object and not a single field.

[Rekl0w]

If you give the anything but value key, it'll give the entire object (Example: val). This was requested change that if you don't give the optionValue prop but if you have the value key on your object, it will automatically pick the value.

[mohamadbdeir]

@Rekl0w

If you give the anything but value key, it'll give the entire object (Example: val). This was
requested change that if you don't give the optionValue prop but if you have the value key on your object, it will automatically pick the value.

I see, but if my options have a key named value, how do I set optionValue prop to use the entire object ?

[Rekl0w]

You can't. You have to change the key name.

[mohamadbdeir]

You can't. You have to change the key name.

But we don't always have control over the object structure especially when it's fetched from a backend we don't control..
Thinking about submitting a pull request

[mohamadbdeir]

@melloware what do you think ?

[sja-cslab]

Just want to reference my issues because they seem to be related

#6589
#6822

[melloware]

@mohamadbdeir i think this has been reported before. Multliselect and DropDown seem to handle it differently.

MultiSelect:

        const getOptionValue = (option) => {
            if (props.useOptionAsValue) {
                return option;
            }

            if (props.optionValue) {
                const data = ObjectUtils.resolveFieldData(option, props.optionValue);

                return data !== null ? data : option;
            }

            return option && option.value !== undefined ? option.value : option;
        };

DropDown:

        const getOptionValue = (option) => {
            const optionValue = props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option ? option['value'] : ObjectUtils.resolveFieldData(option, 'value');

            return props.optionValue || ObjectUtils.isNotEmpty(optionValue) ? optionValue : option;
        };

It looks like Multiselect has an extra props.useOptionAsValue ?

[Rekl0w]

PR submitted.