React-select: [V2] Creatable throws with custom value / label fields

[akre54]

Description:

Go to https://codesandbox.io/s/qj18wmroj and start typing in the select box. Throws TypeError: Cannot read property 'toLowerCase' of undefined.

Cause:

Creatable.js's https://github.com/JedWatson/react-select/blob/v2.0.0-beta.7/src/Creatable.js#L41-L42 function incorrectly assumes the options object has label and value properties.

Possible Fix

compareOption should use getOptionLabel / getOptionValue before referencing the properties.

[th3fallen]

i was literally coming here to post this same error, it also assumes label,value to be strings even if value is an int or something else.

Also the lines in question are, https://github.com/JedWatson/react-select/blob/master/src/Creatable.js#L41

[akre54]

Ping @JedWatson

[webzfactory]

compareOption() also falsely assumes that option.value is a string....

[plxel]

Ping again @JedWatson

[mdzakir]

I had this issue.

I found an issue with compareOption function when changes getOptionValue and getOptionLabel to a different (value|label)

Reason why it is throwing this error: compareOption function is trying to first toLowerCase() the option value and label and then compare it with the characters (string) we are typing. So if you are passing anyone of them (value and label) as number or other than string, it will throw an error.

Here is what I did & it worked for me.

And hope it works for everyone here as well. 😄

1. Mapped the array before hand:

let states = statesArray.map(m => {
      return {
        value: m.id.toString(),
        label: m.stateName
      }
    });

1. Passed the mapped states to Creatable Component

<Creatable
            className="basic-single"
            classNamePrefix="select"
            name="states"
            options={states}
            isMulti
          />

[koutsenko]

Problem is that overriden Option component may contain complex layout and display more that one string value, so 'object'-like label support is necessary.

[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!

[JedWatson]

For completeness, the props formatCreateLabel, isValidNewOption and getNewOptionData props were introduced to Creatable to fix this and other related issues - docs here

If anybody comes across this issue and is experiencing something similar to the problems described here, please open a new issue with details so we can track down anything we missed.

Thanks!