Demo that shows problem in react-select

AsyncDemoComponent.jsx

'use strict';

import React, { Component, PropTypes } from 'react';
import Select from 'react-select';

class RecipientSelect extends Component {
  constructor() {
    super();

    this.asyncOptionsHandler = this.asyncOptionsHandler.bind(this);
    this.filterOptionHandler = this.filterOptionHandler.bind(this);
  }

  componentWillMount() {
    this.asyncOptionsHandler = _.debounce(this.asyncOptionsHandler, 200);
  }

  filterOptionHandler(option, filter) {
    // accept all entries - simulate filtering by the backend via asyncOptionsHandler()
    return true;
  }

  asyncOptionsHandler(input, callback) {
    // add some example values here, normally here would be a AJAX request to the server performed
    let possibleOptions = [
      {label: 'Test 1', value: 'test1'},
      {label: 'Test 2', value: 'test2'},
      {label: 'Test 3', value: 'test3'}
    ];
    setTimeout(() => {
      callback(null, {options: _.filter(possibleOptions, (option) => {
        return option.label.indexOf(input) > -1;
      })});
    }, 400);
  }

  render() {
    return (
      <Select
        className="react-select-component"
        asyncOptions={this.asyncOptionsHandler}
        filterOption={this.filterOptionHandler}
        {...this.props} /* delegate all properties from parent */
        />
    );
  }
}

RecipientSelect.displayName = 'RecipientSelect';
RecipientSelect.propTypes = {
  name: PropTypes.string.isRequired,
  multi: PropTypes.bool.isRequired
};


class AsyncDemoComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      subject: '',
      message: ''
    };

    this.onSubjectChangeHandler = this.onSubjectChangeHandler.bind(this);
    this.onMessageChangeHandler = this.onMessageChangeHandler.bind(this);
    this.onSelectChangeHandler = this.onSelectChangeHandler.bind(this);
  }

  onSelectChangeHandler(strList, objList) {
    this.setState({
      recipients: _.map(objList, (item) => {
        return item.value;
      })
    });
  }

  onSubjectChangeHandler(value) {
    this.setState({ subject: value });
  }

  onMessageChangeHandler(value) {
    this.setState({ message: value });
  }

  render() {
    let subjectValueLink = {
      value: this.state.subject,
      requestChange: this.onSubjectChangeHandler
    };

    let messageValueLink = {
      value: this.state.message,
      requestChange: this.onMessageChangeHandler
    };

    return (
      <div>
        <RecipientSelect
          name="recipients"
          multi={true}
          autoload={false}
          onChange={this.onSelectChangeHandler}
          />
        <input
          type="text"
          name="subject"
          className="form-control"
          placeholder="Subject ..."
          valueLink={subjectValueLink}
          />
        <textarea
          name="message"
          className="form-control"
          cols="30"
          rows="10"
          placeholder="Message ..."
          valueLink={messageValueLink}
          ></textarea>
      </div>
    );
  }
}

AsyncDemoComponent.displayName = 'AsyncDemoComponent';
AsyncDemoComponent.propTypes = {};

export default AsyncDemoComponent;