React-select: [V2] Creatable doesn't use getOptionValue and getOptionLabel props

[DanielClausen]

In V2 if I'm using a creatable with options that don't have a value or label property I'm getting an error about calling toLowerCase on undefined on this line:
https://github.com/JedWatson/react-select/blob/v2/src/Creatable.js#L36

My options have id and name instead of label and value. I'm able to make this work elsewhere with the select by providing getOptionValue and getOptionLabel props. It seems the creatable select should be using these props as well so we can use custom label and value properties.

[smoleniuch]

I have similiar problem, when the created option value is an object it throws an error too.
In that case if you want to use custom values you can customize isValidNewOption property.

I am not familiar with this library yet nor with working on open source project but i have tried to wrap my head around this issue.

This is what documentation says about getOptionValue:

Resolves option data to a string to compare options and specify value attributes

If i am understand this correctly the compareOption function should receive label and value after transformation.How to make this happen?

My bet would be to pass addational data to the isValidNewOption property like those transformers functions or pass already transformed options.

Any advice? i would like to tackle this and make my first pull request.

[Obsserver]

Same problem, any thoughts about this issue?

[mattjstar]

Same Problem but with numeric values. Using the options from http://jedwatson.github.io/react-select/ "Numeric Values" breaks it cause .toLowerCase() doesn't work on numbers

[dpnolte]

Hi, I faced the same issue and I have created a PR that should fix it: https://github.com/JedWatson/react-select/pull/2659 .
If you need to have solution now, you could write your own isValidNewOption to replace the builtin and pass it as a property to the creatable select.

[stfnh]

@dpnolte Thanks for the PR!

I've written my own isValidNewOption which solves the .toLowerCase() problem, but I can't create a new option. I've created a minimal example here: https://stackblitz.com/edit/react-ota5tm

It's not urgent for me and I can wait for the official v2 release. But maybe this is helpful for somebody!

[dpnolte]

Hi @stfnh , have you defined getNewOptionData as well? This builtin defines the data structure of a new option. Additionally, the onChange handler needs to account for the differenct actions: 'create-option' and 'select-option'. I've adjusted your example here (in which you can create a new option by typing random stuff and pressing enter): https://stackblitz.com/edit/react-jaasiq?file=index.js

[stfnh]

Thanks, @dpnolte
Everything works now, this is great. I've overlooked those additional props.

[mrjdavidfg]

There is another bug related to Creatable component and getOptionLabel and getOptionValue props. When used custom label and custom value, the functionality to create new option its not appearing.

Issue here #3901

[bladey]

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue 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!