React-select: [1.0.0-beta13] Async options with Promises displays [object Promise] as input value

[matejlauko]

When loading options async with Promises, like in the example [object Promise] string is set as input value of Select

const getOptions = (input) => {
  return fetch(`/users/${input}.json`)
    .then((response) => {
      return response.json();
    }).then((json) => {
      return { options: json };
    });
}

<Select.Async
    loadOptions={getOptions}
/>

It is because of #907.

loadOptions from Async component attaches to onInputChange on Select component.
so this

if (this.state.inputValue !== event.target.value && this.props.onInputChange) {
    let nextState = this.props.onInputChange(newInputValue);
    if (nextState != null) {
        newInputValue = '' + nextState;
    }
 }

sets newInputValue to return value of loadOptions, which is [object Promise]

[VladimirPal]

I've got the same error.
https://github.com/VladimirPal/react-select/tree/async_promise_bug - here i've added example with fetch.js + bug fixing

[matejlauko]

@VladimirPal thx for the fix

[JedWatson]

Fixed by #941, thanks @VladimirPal!

And thanks @matejlauko for the comprehensive report too :)

[dvreed77]

I'm running 1.0.0-beta13 and am still experiencing this bug.

[VladimirPal]

@dvreed77 Currently this fix only in master branch

[dvreed77]

maybe dumb question, but can I force use this branch from npm?

[VladimirPal]

Try this:
"react-select": "git+ssh://[email protected]:JedWatson/react-select.git"

[VladimirPal]

@dvreed77 But it will not help you:( You have to build lib folder manually.
cd node_modules/react-select
npm install && npm build

[dvreed77]

@VladimirPal Was battling some corporate proxy stuff there for a second. I followed all that, but am still getting the [object Promise] in Select.

Only difference is I used http protocal vs ssh: "react-select": "git+https://github.com/JedWatson/react-select.git"

[VladimirPal]

@dvreed77 i've created builded version, try use it:
"git+https://github.com/VladimirPal/react-select.git"

[dvreed77]

I get this:

 [email protected] node_modules/react-select/node_modules/gulp-babel
- [email protected] node_modules/react-select/node_modules/babelify
- [email protected] node_modules/react-select/node_modules/react-component-gulp-tasks
- [email protected] node_modules/react-select/node_modules/babel-eslint
- [email protected] node_modules/react-select/node_modules/babel
- [email protected] node_modules/react-select/node_modules/react-select
[email protected] /Users/dreed/Projects/orgchart
├── [email protected]  extraneous
├── [email protected]  extraneous
├── [email protected]  invalid (git+https://github.com/VladimirPal/react-select.git#acb3a69464dfe66edf00faef2b7fbebac2f9ddb5)
└── [email protected]  extraneous

npm WARN [email protected] No description
npm WARN [email protected] No repository field.

Note the invalid error

[dvreed77]

Also am trying it without browserify and including the .js and .css from /dist directory and am still getting same issue

[dvreed77]

@VladimirPal
I'm closer... I was using this example code, which doesn't seem to work:

const getOptions = (input) => {
  return fetch(`/users/${input}.json`)
    .then((response) => {
      return response.json();
    }).then((json) => {
      return { options: json };
    });
}

<Select.Async
    name="form-field-name"
    value="one"
    loadOptions={getOptions}
/>

and now am using something like this:

getUsers: function (input, callback) {
            console.log(input);
            fetch(`/users/${input}.json`)
                .then(function(response) {
                    return response.json()
                })
                .then(function(json) {
                    var data = {
                        options: json,
                        complete: false
                    };
                    callback(null, data);
                });

        },

This still isn't quite working, but am not getting the [object Promise] in select window.

The optionRenderer is only firing on first character, even though I can see elements coming back

[dvreed77]

ok, even closer: had to set filterOption={function(){ return true; }} to just pass through

[mattparrilla]

@JedWatson any time frame on when this might get released? I'm not familiar with the release cadence but would love to use fetch + react-select for async options!