Inconsistent API: Setting the Select value programatically is possible only with strings (not with objects like options or asyncOptions)

[mik01aj]

react-select is pretty nice when used on its own, but I find it hard to integrate with other components.

In particular, the only way to change the value programmatically it to update the value prop. But this has a serious problem: while options and asyncOptions can contain objects, value is only a string. The API is inconsistent here.

Think about this use case: I want an input for users to invite, and they should be shown with avatar. This limitation here means that if the user already added some friends to invite (they are objects with name and avatar url), after any programmatic change the avatars will disappear.

(For me, it means that I have to work it around by stopping using objects in options and save them somewhere else, and then get them in valueRenderer)

[mik01aj]

It seems possible with setValue and other related functions in Select component. The only problem is that they're not documented.

I close this as a duplicate of #420.

[saulshanabrook]

@mik01aj Did you get it working so that you could set the values with objects?

[mik01aj]

After reporting the issue, I rewrote my code so that the select uses only ids, and the data is fetched from some other place (so I don't need it in my component anymore). But I do use setValue in my unit tests, and it works as expected.

[saulshanabrook]

Ah ok. That makes sense. I am just using JSON.stringify() and JSON.parse()

[mik01aj]

Reopening as of #420 (comment)

[Bertg]

👍 We have this issue as well, and the ref.selector.addValue({...}) works wonderful. No we tried to make it work using the current props, but there was just now way to do it using options and value.

What we suggest is an values prop. To be used instead of value, and only in multiple mode. This prop is an array of objects, either derived from a string or numeric value, or the original object.

These could still work nicely in tandem with each other.

[mik01aj]

+1 @Bertg

[JedWatson]

I'd actually really like to update react-select to work with complex value prop values (that reads horribly...)

It was originally written for the "drop into a form" use-case, but for more complex applications where you're controlling props & value from higher-level components I agree it's clunky.

Hopefully will have some time to look into this in the near future; if anyone else wants to work on the refactor with me, please shout out.

[gwyneplaine]

resolved in v2, we now only allow values to be passed in as objects for a normalised api.