React-select: Select.Async returns undefined

[lightshire]

Hi,

I'm writing about a curious case. (Just followed the given documentation). First off is it broken?

utils/requests/schools

import axios from 'axios'
import 'utils/interceptors'

export function search (id) {
  return (query) => {
    return axios.get(__API__ + '/division/' + id + '/school', {
      params: {
        query: query
      }
    })
    .then((response) => {
      return response.json()
    })
    .then((json) => {
      return {
        options: json
      }
    })
  }
}

react component

import React, { PropTypes } from 'react'

import Select from 'react-select'
import { search } from 'utils/requests/schools'

class MyExampleView extends React.Component {

  render () {
    return (
      <div className='panel'>
              <Select.Async
                loadOptions={search(this.props.params.id)}
                autoload={true} />

      </div>
    )
  }
}

It seems that Async is undefined.

I tried

import { Async } from 'react-select'
console.log(Async) //returned undefined

import Select from 'react-select'
console.log(Select.Async) //returned undefined  

Why do you think is that?

[lightshire]

should I close this?

Found out that it should not be loadOptions rather it should be asyncOptions

[aeleftheriadis]

I get the similar error like you, but asyncOptions doesn't work for me

[lightshire]

@aeleftheriadis fixed it with:

<Select
              asyncOptions={search(this.props.params.id)}
                onChange={::this.handleSelectChange}
                value={selected.label}
               />

note: i didn't use Select.Async, i used Select

[aeleftheriadis]

Great. Thank you @lightshire asyncOptions has done the magic.

[johnnyfreeman]

Select.Async doesn't work for me either. Either it's broken, or the documentation is.

[aeleftheriadis]

@johnnyfreeman Please see the following example

import React, { Component }  from 'react';

import 'moment/locale/el';
import Locale from '../extensions/dist/Locale';
import InputItemsArray from '../extensions/dist/InputItemsArray';
import AlertDismissable from './AlertDismissable.jsx';
import Select from 'react-select';
import Ajax from '../extensions/dist/Ajax';

/**
 * Class Representing Input With SelectItem Component
 * @extends React.Component
 */
 export default class SelectItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       value: props.initialValue
     }
   }

   componentWillMount(){
     InputItemsArray.addItem({name: this.props.name,value: this.state.value},this.props.inputItems);
   }

   getSearchResults (input, callback) {

     if(input !=null ){
       input = input.toLowerCase();

       let formData = {
         'typeStr': this.props.type,
         'searchTxt': input
       };

       Ajax.httpPost(this.props.urlSearchByType,formData,true,this).then(function(response) {

         const result = JSON.parse(response).result,
               dataArray = Array.isArray(result) ? result : [],
               error = JSON.parse(response).error;
         var data = {
           options: dataArray.slice(0, 1000),
           complete: false
         };

         callback(null, data);

       }).catch(function(error) {
         callback(error);
       });
     }
   }
   handleChange (selectedValue) {
     InputItemsArray.addItem({name: this.props.name,value: selectedValue},this.props.inputItems);
     this.validateValue(selectedValue);
   }
   validateValue(selectedValue){
     if(selectedValue.split(',').length > 1){
       selectedValue = selectedValue.split(',').join('\',\'');
     }
     if(selectedValue.length != 0){
       selectedValue = '\''+selectedValue+'\'';
     }
     InputItemsArray.addItem({name: this.props.name,value: selectedValue},this.props.inputItems);
   }
   /**
    * handleAlertDismiss onDismiss handler for Alert
    * Set null value on alertText to empty Alert Text
    */
   handleAlertDismiss() {
     this.setState({alertText: null});
   }
   render() {
     return (
       <span>
         <AlertDismissable alertText={this.state.alertText}  handleAlertDismiss={this.handleAlertDismiss.bind(this)}/>
         <React.addons.CSSTransitionGroup transitionName="opacityEaseInOutExpo" transitionAppear={true} transitionAppearTimeout={200} transitionEnterTimeout={200} transitionLeaveTimeout={200}>
           <div className="inputItem">
             <h3>{this.props.description} - {this.props.name}</h3>
             <Select
                 asyncOptions={this.getSearchResults.bind(this)}
                 value={this.state.value}
                 multi={true}
                 noResultsText= { Locale.getMessage(this.props.language,'noResultsFound') }
                 clearAllText= { Locale.getMessage(this.props.language,'clearAllText') }
                 clearValueText= { Locale.getMessage(this.props.language,'clearValueText') }
                 searchingText= { Locale.getMessage(this.props.language,'searchingText') }
                 searchPromptText= { Locale.getMessage(this.props.language,'searchPromptText') }
                 placeholder={ Locale.getMessage(this.props.language,'selectPlaceholder') }
                 onChange= {this.handleChange.bind(this) }
                 cacheAsyncResults={false}
               />
           </div>
         </React.addons.CSSTransitionGroup>
       </span>
     );
   }
 }


SelectItem.propTypes = {
  value: React.PropTypes.string
};

SelectItem.defaultProps = {
  initialValue: null
};

[johnnyfreeman]

Thanks @aeleftheriadis. I managed to get it working another way. The point I was trying to make is, it doesn't work they way the documentation says it is supposed to work. So, either Select.Async is broken, or the documentation needs to be updated. I appreciate the gesture. :)

[tomRedox]

Possibly the issue here is that Select.Async only works with version 1.0.0 of react-select onwards. The documentation is now showing 1.0.0 syntax, but doing an npm install for react-select will currently get the 0.9.x version, so the docs are then wrong for that version.

I have just found this out the hard way!

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples