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

[jimbojetlag]

Is allowCreate={true} planned to be added, or is it a bug? If latter, when would this be added?

[cgwyllie]

Is this maybe covered by the "tags mode"? https://github.com/JedWatson/react-select/issues/568#issuecomment-153785740

[jimbojetlag]

@cgwyllie yes, it's tags mode I was looking for. Seems like it's not yet implemented.

What's the recommended version to use with react 0.14? It seems 0.9 is stable, but not compatible with latest react.

[aybmab]

Any updates or ETA's on making this work?

Is anyone working on it or should we tackle it?

[aybmab]

@JedWatson ?

[CodeOfDavid]

+1

[cjhveal]

+1

[dacostafilipe]

Same.

How far are you on this?

I've started looking at the code and I already have partial support for allowCreate on multi/single value.

[dcwither]

+1

[jonathanasquier]

+1

[ghost]

+1

[bdefore]

:+1: for tags mode in 1.0, and until then please alert in the README that allowCreate has no effect!

[nizamsp]

Sorry. Can someone enlighten me what's a tags mode? allowCreate={true} is not working me as well. Curious to know whether I am using tags mode or not.

[hafeez1042]

+1

[mldangelo]

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.

[Craga89]

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

[seanmheff]

+1

[ragebiswas]

+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.

[Timopheym]

+1 It's really important i don't understand why it still needs to be done... i've spend lot of time figuring out(

[rory-eiq]

+1

[Timopheym]

Just use last stable release. That's the fix for me.

[jtadmor]

If you need native allowCreate, use a version that has it. If you want to use the newest, this bit of code is working for me as a wrapper that you can pass other props into.

import React, { Component } from 'react'
import _ from 'lodash'

import Select from 'react-select'

export default class CustomValueSelect extends Component {
  constructor(props) {
    super(props)

    this.state = {
      options: this.props.options,
      customOption: null,
      customSelected: []
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.options !== nextProps.options) {
      this.setState({ options: nextProps.options })
    }
  }

  getOptions() {
    const base = this.state.options.concat(this.state.customSelected)

    return this.state.customOption
      ? [this.state.customOption].concat(base)
      : base
  }

  handleInputChange = _.debounce((text) => {
    if (text.length) {
      const upper = `${text[0].toUpperCase()}${text.slice(1)}`
      const customOption = { label: upper, value: upper, custom: true }
      this.setState({ customOption })
    } else {
      this.setState({ customOption: null })
    }
  }, 250)

  handleChange = (opts) => {
    const selectedOpt = this.props.multi ? _.last(opts) : opts
    // If custom values were selected, add them to init options
    if (selectedOpt && selectedOpt.custom) {
      this.setState({ customSelected: this.state.customSelected.concat(selectedOpt) })
    }

    this.props.onChange(opts)
  }

  render() {
    return (
      <Select {...this.props}
        onChange={this.handleChange}
        onInputChange={this.handleInputChange}
        options={this.getOptions()} />
    )
  }
}

[gor181]

+1... Figured it out by checking the source and seeing all related to allowCreate commented out.

[Emerson]

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).

[jamesfzhang]

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? :(

[bgrayburn]

+1 definitely just wasted time by trusting the docs ;)

[francis-li]

What is the latest version of react-select that still has support for allowCreate?

[skreis]

@francis-li v0.9.1 seems to be the latest version supporting allowCreate.
Some bits got commented in v1.0.0-beta1 through v1.0.0-beta13.

Reference:

• https://github.com/JedWatson/react-select/blob/v1.0.0-beta1/lib/Select.js#L281
• https://github.com/JedWatson/react-select/blob/v1.0.0-beta1/lib/Select.js#L454

[labkey-nicka]

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

[Tyube]

+1

[Arkayus]

+1

[themetis]

+1

[DanielLaberge]

+1

[isoloviev]

+1

[bvaughn]

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. 😄

[bvaughn]

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. 😎

[mayerwin]

It still doesn't work with the latest RC, is it normal?

[bvaughn]

@mayerwin Are you using the recently added Creatable component? If not, please try it.

[mayerwin]

@bvaughn Yes just found out about it in another issue. The documentation was quite misleading as it was somehow saying we should go back to 0.9 to get support for allowCreate, without mentioning at the same time that Creatable provided the now recommended way to achieve the same result.

[bvaughn]

@mayerwin Documentation is hard. I think Jed probably wrote the original docs and I tried to update them when I added Creatable. Apparently I missed some spots though. Best thing you could do- if you're willing- would be to submit a docs PR and tag me on it. It would help others like yourself. :smile:

[mayerwin]

@bvaughn Done.