Add value which is not in a list

[barsukov]

How it possible to add value when it is not in a list of options? I recceived every time empty value:(
like create = true? is it support?

[dcousens]

@barsukov can you elaborate on what it is you're trying to do? Maybe a [pseudo] code example?

[barsukov]

@dcousens Ok I will try to explain it here.
Like in Selectize lib I want to have ability to add Item when nothing is found like that

Instead of

I found #101 here in development which provide functionality like <Select ... creatable={true} />

This functionality Is very very very important, without it this component should not be usable...

[anthonator]

I've been able to accomplish something like this when using asyncOptions.

Here's an example.

import React from 'react';
import Select from 'react-select';

class TagSelect extends React.Component {
  render() {
    return (
      <Select {...this.props} asyncOptions={ this._handleAsync } delimiter=',' multi={ true } />
    );
  }

  // private

  _handleAsync(input, callback) {
    setTimeout(function() {
      callback(null, {
        options: [
          { value: input, label: input }
        ]
      });
    }, 500);
  }
}

export default TagSelect;

[barsukov]

This solution is good , but it looks like

[barsukov]

@anthonator and your example works only in one direction, What if I want to have the search for existance options(like I received from server, and if I did not found anything I want to add this value) So useful case I am really did not understand why it is not out of the box ;(

[anthonator]

You should be able to do that.

Here's a real world example of me fetching tag values from the server and also adding the user's input at the top so the user can select what they're currently typing as an option.

If you wanted to only show the user's input if nothing was returned from the server you should be able to tweak something like this to make that work.

_handleAsync(input, callback) {
    let options = [];

    if (!_.isEmpty(input)) {
      options.push({ value: input, label: input });

      TagQueries.autocomplete(this.state.data.get('id'), input)
        .then(() => {
          TagStore.get(this.state.data.get('id')).forEach((tag) => {
            options.push({ value: tag.get('id'), label: tag.get('name') });
          });

          callback(null, { options: options });
        });
    } else {
      callback(null, { options: options });
    }
  }

[dcousens]

Added in #151