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

Feature request: allow option value to be set to an object #858

Closed
michaelchihuyho opened this issue Mar 30, 2016 · 7 comments
Closed

Feature request: allow option value to be set to an object #858

michaelchihuyho opened this issue Mar 30, 2016 · 7 comments

Comments

@michaelchihuyho
Copy link

Copy of #572 since there seemed to be a misunderstanding of the core issue there. The desire here is to be able to set options that look like this:

var options = [
  {label: 'item 1', value: {id: 123, foo: 'bar'},
  {label: 'item 2', value: {id: 456, foo: 'baz'}
]

The reason this doesn't work currently is because of how this.props.value is interpreted to display the selected option.

  1. Values that aren't strings or numbers aren't handled:
    if (typeof value !== 'string' && typeof value !== 'number') return value;
  2. Even if they were, === is not sufficient for comparing objects:
    if (options[i][valueKey] === value) return options[i];

Is setting values to objects a feature react-select is interested in supporting? If so, would it be okay to add a dependency on an object deep equality checker like node-deep-equal?

@jdgarcia
Copy link

Weird, I'm doing exactly that (see below) and it works as I would expect it.

const selectOpt = {
  label: item.label,
  value: item
};

For reference, I'm using version 1.0.0-beta9, so it might not be in pre 1.0.0

@michaelchihuyho
Copy link
Author

Hmm I'm on beta8 but I'll try it out on a blank app withbeta9. My hunch is that it works for you because the value object is being passed around by reference when that might not be the case for me.

@FranBran
Copy link

FranBran commented Apr 4, 2016

unless I want to make the component controlled, it works for me as well. But as soon as I want to pass in values, it doesn't work as expected anymore as the value is compared to the options by indexOf(), which has the same issue as comparing objects by === (https://github.com/JedWatson/react-select/blob/master/src/Select.js#L689)

@bladey
Copy link
Contributor

bladey commented May 27, 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

@bladey bladey closed this as completed May 27, 2020
@vasilevich
Copy link

The issue seems not to be solved or is not well documented, please provide explanation how to use objects properly in react-select value?

@ebonow
Copy link
Collaborator

ebonow commented Nov 28, 2020

Greetings @vasilevich ,

The implementation for using objects as values seems fairly straight forward. Given this codesandbox example, what other questions or documentation is unclear?

I believe this should be marked resolved and closed given:

  1. The original post is over 4 and half years old.
  2. The original use case is for a v1 beta which has been long depreciated.
  3. The expected behavior described in the initial post is no longer an issue (per the above example).
  4. There are no other unresolved questions.

IF there are other questions and concerns, please feel to object, but I see no reason not to let this rest in peace.

@mirelAostacioae
Copy link

Greetings @vasilevich ,

The implementation for using objects as values seems fairly straight forward. Given this codesandbox example, what other questions or documentation is unclear?

I believe this should be marked resolved and closed given:

  1. The original post is over 4 and half years old.
  2. The original use case is for a v1 beta which has been long depreciated.
  3. The expected behavior described in the initial post is no longer an issue (per the above example).
  4. There are no other unresolved questions.

IF there are other questions and concerns, please feel to object, but I see no reason not to let this rest in peace.

Hi,

There is still an issue with the selected option which doesn't work properly since the verification in isOptionSelected is not done for objects.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants