[V2] Creatable throws with custom value / label fields

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.

[akre54]

Ping @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
          />