Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown: Init-Value not working if options have label,value properties #6589

Open
sja-cslab opened this issue May 8, 2024 · 8 comments
Open
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add

Comments

@sja-cslab
Copy link
Contributor

Describe the bug

If Dropdown is filled with {label: string, value: any}[] the inital value isn't selected.

Reproducer

https://stackblitz.com/edit/vitejs-vite-2prkbq?file=src%2FApp.tsx

PrimeReact version

10.6.5

React version

18.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

@sja-cslab sja-cslab added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 8, 2024
@sja-cslab
Copy link
Contributor Author

sja-cslab commented May 8, 2024

I noticed that this is not an error. My problem here is noted in the docs:

If optionValue is omitted and the object has no value property, the object itself becomes the value of an option

So this is more a question than a Bug => How can I get and set the Object, even if it has a value property?

@Rekl0w
Copy link
Contributor

Rekl0w commented May 8, 2024

https://stackblitz.com/edit/vitejs-vite-tmd4yk?file=src%2FApp.tsx

I changed your code a bit. This should work.

@sja-cslab
Copy link
Contributor Author

That works, and I'm using it in other parts of my code. However, now if I need to work with that object, for example, in the onChange event, I need to find it within the options. So, that is an acceptable workaround but not a real solution for that problem.

I guess you want to say, 'you cannot get an object directly from the component if it has a value property,' correct?

@Rekl0w
Copy link
Contributor

Rekl0w commented May 8, 2024

value prop is need to work with a state that can be changed but if you give a static value to it, it won't change.

I guess you want to say, 'you cannot get an object directly from the component if it has a value property,' correct?

You can get an object with onChange method but this component is not sets the object directly. It sets the value prop and works with it.

@melloware melloware added Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels May 8, 2024
@sja-cslab
Copy link
Contributor Author

@Rekl0w, I see your point; however, it feels wrong that the component works differently based on how something looks inside.

If I pass, for example, [{foo: "label", bar: "value"}, {foo: "label2", bar: "value2"}] and use optionLabel="foo", I'll get the whole object in onChange. If I rename those bar properties to value, it won't work anymore. I hope you get my point.

@melloware Could we make that to a feature/enhancement request? What about an extra option "workWithObject" or something? :)

@melloware
Copy link
Member

Yes this has always been a weird contention with using Object vs Primitive and letting it know which JSON fields you mean to use for value and label.

@melloware melloware added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team labels May 8, 2024
@sja-cslab
Copy link
Contributor Author

I would expect that if I do not set optionValue, that I get back whatever I throw in.

@sja-cslab
Copy link
Contributor Author

@melloware just looked at the code

const getOptionValue = (option) => {
    return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : ObjectUtils.resolveFieldData(option, 'value') || option;
};

The question I have here is why it has been decided that it is a good idea to try to resolve option.value if no optionValue is set. Why not just return option then? Without digging deeper, I would expect option to be a primitive if only primitives are available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants