react-select: allowCreate={true} does not work in in 1.0.0

@ryanzec created pull request #999 which implements allowCreate amongst other things.

Hey everyone!

I figured out a (very) hacky way around this.

If you overide filterOptions with something like this:

filterOptions: function (options, filter, currentValues) {
  var filteredOptions = [];
  if (filter && filter.length >= 1){ // If a filter is present
    _.each(options, function(option){
    if (option.value.toLowerCase().trim().indexOf(filter.toLowerCase().trim()) > -1) {
      filteredOptions.push(option);
    }
  });
  }
  else { // Show everything available that's not already selected if no filter is used
    _.each(options, function(option){
      if (!_.contains(_.pluck(currentValues, 'value'), option.value)){
        filteredOptions.push(option);
      }
    });
  }
  // Only display  `Add ${filter}` if no other options are available 
  if (filteredOptions.length == 0 && filter) {
    filteredOptions.push({label: `Add ${filter}`, value: filter, create:true});
  }
  return filteredOptions;
},

And then handleChange with something like this:

handleSelectChange: function (value) { // value is an array of values -- I write bad code 
  _.each(value, function (singleValue) {
    if (singleValue.create){
      singleValue.create = false;
      singleValue.label = singleValue.value.trim();
      // I'm using a more complex slugify function here
      singleValue.value = singleValue.label.toLowerCase();
    }
  });
  console.log('You\'ve selected:', JSON.stringify(value));
  this.setState({ value });
},

Finally, when I define Select, I use the following configuration

filterOptions={this.filterOptions}
onChange={this.handleSelectChange}

Notice that allowCreate is not used.

Notice my underscore dependency. You could eliminate the _.each loops with for (var value of myArray) syntax. And the _.contains and _.pluck with ES6 set syntax. I’ll refactor this after dinner.

An ES6 implementation of the above: https://gist.github.com/Craga89/5215e0e5079741b856d8

+1 definitely just wasted time by trusting the docs 😉

+1 - It’s a bit annoying to see support of ‘allowCreate’ in the README, and then install the npm, code the example and THEN see things not working. Please prioritize this bug or at least update the README saying that allowCreate isn’t supported yet.

@bvaughn Done.

Agreed on updating the docs to explain that this feature doesn’t work with the 1.0 beta. Is there a native version of this library with allowCreate and react 15 compatibility? 😦

This issue no longer exists in the 1.x code (as of PR #1187) and so I’m going to close it!

Look for an updated RC with this functionality soon. 😎

By the way, I believe PR #1187 should resolve this issue. Please feel free top give the branch a spin and let me know if you have any concerns or other feedback. 😄

+1

I think it would be worth updating the docs explaining that this feature doesn’t work in the latest version. Spent more time than I’d like to admit trying to get this to work, finally ended up here, just to find out this is no longer supported (unless you use a previous version).