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

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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 17 (2 by maintainers)

Commits related to this issue

gracefully handle non-string values in CreatableSelect compareOption. See #2910 — committed to DrMeers/react-select by DrMeers 6 years ago
Fix #2910 creatable not accepting falsy values — committed to vladinator1000/react-select by vladinator1000 6 years ago

Most upvoted comments

same issue +1

abdi-mohamed on Nov 1, 2018

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),
};

vladinator1000 on Nov 26, 2018

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 😃

alexeyeryshev on Aug 9, 2018