React-select: allowCreate in single valued select

[bgrayburn]

are there plans to add option creation to single valued selects? I'm interested in implementing this.

[rahulchavan30]

Me too even i can contribute to the same functionality

[Stenerson]

I implemented a solution to this problem in "user land". I'm not sure if this is recommended or not but it works pretty smoothly in my application.

I created a custom filterOptions function that takes out the parts I need from the default function here and adds a new row for "Add".

<Select
  options={options}
  onChange={ props.handleChange }
  filterOptions={(options, filterValue, excludeOptions) => {
    let lowerFilterValue = filterValue.toLowerCase();
    let filteredOptions = options.filter(option => {
      let optionValue = String(option.value).toLowerCase();
      let optionLabel = String(option.label).toLowerCase();
      return (optionValue.indexOf(lowerFilterValue) > -1 || optionLabel.indexOf(lowerFilterValue) > -1);
    });

    // This is the important part
    if (filterValue.length > 0) {
      filteredOptions = filteredOptions.concat({value: -1, label: `Add ${filterValue}?`});
    }

    return filteredOptions;
  }}
/>

Then, in my handleChange function (not shown) I check to see if the value is -1 (which is not a valid real value for my options) and if it is, I'll POST to create a new item.

Does anyone see problems with this solution? I'd rather implement it natively through react-select but this seems to be working fine.

[chrisjeffery]

Then, in my handleChange function (not shown) I check to see if the value is -1 (which is not a valid real value for my options) and if it is, I'll POST to create a new item.

@Stenerson
How did you access the value of the filter field from your handleChange method?

[Stenerson]

@chrisjeffery since I'm calling handleChange from React-Select's onChange prop the newly selected option (which is an object) is passed as a parameter to handleChange.

So when I select the "Add" option, the param that gets passed to handleChange looks like:
{value: -1, label: "Add <Whatever I typed that didn't exist>?"}

So the handleChange function looks something like this:

function handleChange(newValue) {
  if (newValue.value < 0) {
    let name = addNewItemtext(newValue.label); // "<Whatever I typed that didn't exist>"
    console.log(newValue); // {value: -1, label: "Add <Whatever I typed that didn't exist>?"}
    // Do something here for the added option that wasn't in the list
  } else {
    // Do something here for a "normal" selection
    console.log(newValue); // {value: 121, label: "Existing Option"}
  }
}

I also created a few utility functions that add or remove the label text. _Note: the title is different here than in my previous examples._

const preTitleText = '+ Add new item "';
const postTitleText = '"';

export function addNewItemTitle(text) {
  return preTitleText + text + postTitleText;
}

export function addNewItemtext(title) {
  return title.substring(preTitleText.length, title.length - postTitleText.length);
}

Hope that helps!

[Stenerson]

I happened to stumble upon the react-select wiki shortly after I wrote my last comment and it appears that the solution I'm proposing had been recommended as a workaround to allowCreate not working for multi selects. I don't see a reason why this wouldn't work for single selects too.

Rather than using {value: -1} the example adds an additional field to the "new" object.

{label: Add `${term}`, value: term, create:true}

[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 is now supported in 1.x (as of PR #1187) and so I'm going to close it!

Look for an updated RC with this functionality soon. 😎