React-select: AsyncCreatable loadOptions bug

Created on 17 Aug 2018 · 2Comments · Source: JedWatson/react-select

            import { AsyncCreatable } from 'react-select' //   "version": "2.0.0",

            <AsyncCreatable value={null}
                            loadOptions={() => Promise.resolve([{value:1, label: 'Not empty array'}])}                                
                            onChange={ () => {} }
            />

after adding any string in input I got:
Uncaught TypeError: option.value.toLowerCase is not a function
at compareOption (react-select.esm.js:4344)
at react-select.esm.js:4355
at Array.some ()
at isValidNewOption (react-select.esm.js:4354)
at ProxyComponent.componentWillReceiveProps (react-select.esm.js:4437)
at callComponentWillReceiveProps (react-dom.development.js:11528)
at updateClassInstance (react-dom.development.js:11720)
at updateClassComponent (react-dom.development.js:13154)
at beginWork (react-dom.development.js:13825)
at performUnitOfWork (react-dom.development.js:15864)

Source

drakoniprincessa

👍4

Most helpful comment

I had a similar problem with <Creatable /> component. When I load the component with an empty array as the options it breaks when I type in the textfield to create a new (the first) option.

Passing a custom isValidNewOption solved my problem (temporary workaround probably):

isValidNewOption={(inputValue, selectValue, selectOptions) => {
  const isNotDuplicated = !selectOptions
       .map(option => option.label)
       .includes(inputValue);
    const isNotEmpty = inputValue !== '';
    return isNotEmpty && isNotDuplicated;
     }}

rojasmi1 on 22 Aug 2018

❤11 👍8

All 2 comments

I had a similar problem with <Creatable /> component. When I load the component with an empty array as the options it breaks when I type in the textfield to create a new (the first) option.

Passing a custom isValidNewOption solved my problem (temporary workaround probably):

isValidNewOption={(inputValue, selectValue, selectOptions) => {
  const isNotDuplicated = !selectOptions
       .map(option => option.label)
       .includes(inputValue);
    const isNotEmpty = inputValue !== '';
    return isNotEmpty && isNotDuplicated;
     }}

rojasmi1 on 22 Aug 2018

❤11 👍8

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 limited efforts to maintain the latest 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!