React-select: v2 no longer accepts undefined and null values for creatable

[Slind14]

Uncaught TypeError: Cannot read property 'toLowerCase' of null
    at compareOption (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:58050)
    at modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:58059
    at Array.some (<anonymous>)
    at isValidNewOption (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:58058)
    at Creatable.componentWillReceiveProps (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:58143)
    at modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:24020
    at measureLifeCyclePerf (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:23485)
    at ReactCompositeComponentWrapper.updateComponent (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:24019)
    at ReactCompositeComponentWrapper.receiveComponent (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:23956)
    at Object.receiveComponent (modules.js?hash=dd58b4ecfe7b96bbf9be666342adcbc6603f96e6:16601)

[eryshev]

I think I have similar problem

Uncaught TypeError: option.value.toLowerCase is not a function
    at compareOption (Creatable.js:40)
    at eval (Creatable.js:51)
    at Array.some (<anonymous>)
    at isValidNewOption (Creatable.js:50)
    at Creatable.componentWillReceiveProps (Creatable.js:133)
    at callComponentWillReceiveProps (react-dom.development.js:6880)
    at updateClassInstance (react-dom.development.js:7120)
    at updateClassComponent (react-dom.development.js:8333)
    at beginWork (react-dom.development.js:8966)
    at performUnitOfWork (react-dom.development.js:11798)

The problem is in this function

var compareOption = function compareOption(inputValue, option) {
  var candidate = inputValue.toLowerCase();
  return option.value.toLowerCase() === candidate || option.label.toLowerCase() === candidate;
};

And it could work only if values are strings what wasn't my case, I changed it to be strings and now it's working like a charm :)

[sagrath23]

I have the same issue, the only difference is that in my case, i want to use a span element to display my options.

[jgramling17]

+1

This function will not accept numbers, only strings due to toLowerCase()

var compareOption = function compareOption(inputValue, option) { var candidate = inputValue.toLowerCase(); return option.value.toLowerCase() === candidate || option.label.toLowerCase() === candidate; };

@eryshev mentioned a good workaround for now above

[OmkarKirpan]

I have the same issue

[brianleach]

same issue.

[adamwebster]

I have the same issue as well.

[shubhankar30]

Same issue! +1

[shubhankar30]

Was getting this error when I was attempting to set the value as value={[{label: temp}]} within .
Was able to solve it be creating an external function and calling it within value prop and returning an array which is the format of React-select i.e. having correct label and key value.

var items = [];
items.push({value:'', label:temp})
return items;

[abdi-mohamed]

same issue +1

[vladinator1000]

I've made a pull request that should fix this, until it gets accepted, here's a workaround. Your option's value needs to be a string:

const defaultOption = {
  label: 'hello',
  value: String(yourValue),
};

[koutsenko]

Same issue, any updates?

[slavivanov]

Just stumbled upon this. As a workaround I passed a custom isValidNewOption:
```javascript
isValidNewOption={isValidNewOption}
value={currentOption}
onChange={option => option && this.props.onChange(option.value) }
options={options}
isSearchable={true}
/>

function isValidNewOption(
inputValue,
selectValue,
selectOptions
) {
return !(
!inputValue ||
selectValue.some(option => compareOption(inputValue, option)) ||
selectOptions.some(option => compareOption(inputValue, option))
);
}

const compareOption = (inputValue, option) => {
const candidate =
typeof inputValue === "string" ? inputValue.toLowerCase() : inputValue;
if (typeof option.value === "string") {
if (option.value.toLowerCase() === candidate) {
return true;
}
}
if (typeof option.label === "string") {
if (option.label.toLowerCase() === candidate) {
return true;
}
}
return option.value === candidate || option.label === candidate;
};
````

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

[Slind14]

Hi @bladey,
this is an ongoing issue. We are still using the old version due to this breaking change. It seems to affect a lot of people. Maybe it is worth the consideration of opening it, again?

[bladey]

Thanks @Slind14!

[ebonow]

Hi @bladey,
this is an ongoing issue. We are still using the old version due to this breaking change. It seems to affect a lot of people. Maybe it is worth the consideration of opening it, again?

Greetings @Slind14 ,

Which version are you using? I believe this was patched in 2.3?

[ebonow]

In an effort to close out stale and inactive issues, I will be closing this. Please feel free to reply if you still have questions and we can reopen this if necessary.