Why was comma create new tag functionality removed?

[ryanzec]

So there is this block of commented out code:

// case 188: // ,
//  if (this.props.allowCreate && this.props.multi) {
//      event.preventDefault();
//      event.stopPropagation();
//      this.selectFocusedOption();
//  } else {
//      return;
//  }
// break;

and I was wondering why it is commented out? Being able to create a new tag on the comma key is a pretty big deal for me and was wondering when this would be added back in?

[keul]

See #960

[ryanzec]

@keul Not exactly sure how the newOptionCreator option relates to this?

[bvaughn]

FWIW that line was added, commented out, in c3d5e01. Not sure why, but it was commented out from the code and added to the "TODO" list (where it remains currently).

[bvaughn]

Took a quick look at this and it looks like there's a good bit more complexity than just the commented-out lines. Looks like support for newOptionCreator would need to be added along with some changes to setValue / getValueArray to supporting selecting a newly-added tag. Seems tricky.

[ryanzec]

@bvaughn It did not seem too tricky. I took the PR #660 which seemed abandon, the newOptionCreator seemed to be already working there, it was just the allowCreate that was not working. I refactored the code to get the allowCreate working and then refactored the commented out code that used to do the comma create new item stuff into a slightly more flexible solution in which you can define any keyCode to perform that functionality (I did not have to make any changes to setValue / getValueArray in order to get selecting a newly created tag to work).

I created the PR #999 with those changes and all tests pass (along with the new ones for the re-implemented functionality), just waiting on feedback on it. Chance are I am going to publish my own version on NPM this weekend so I can continue along with my project as this functionality is 100% a show stopper.

[bvaughn]

Oh cool. I was unaware of #660. I was just working from master, where the property is defined but not used or referenced anywhere.

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

[GuillaumeCisco]

Is this fix in the rc.1 code?

[bvaughn]

Yup. Comma creates a new tag by default, as does ENTER and TAB

[GuillaumeCisco]

I've just resinstalled the package from the master branch.
The only way to make it works is to add a filterOptions attribute:

    filterOptions(options, filter, currentValues) {
        let filteredOptions = options.reduce((memo, option) => {
                // Optgroup support
                if (!('value' in option)) {
                    memo.push(option);
                }

                // If a filter is present
                else if (filter && filter.length >= 1) {
                    let valueNormalized = option.value.toLowerCase().trim();
                    let filterNormalized = filter.toLowerCase().trim();

                    if (valueNormalized.indexOf(filterNormalized) > -1) {
                        memo.push(option);
                    }
                }

                // Show everything available that's not already selected if no filter is used
                else if (!this.isSelected(currentValues, option.value)) {
                    memo.push(option);
                }

                return memo;
            },
            []);

        // Only display `Add ${filter}` if no other options are available
        if (filteredOptions.length < 1 && filter) {
            filteredOptions.push({
                label: filter,
                value: filter,
                create: true
            });
        }

        return filteredOptions;
    }

But it only works with ENTER and TAb, no COMMA, but the code should handle it...
I don't really understand what's going on :/

[bvaughn]

I've just resinstalled the package from the master branch.

Why not just install the RC from NPM? npm i --save react-select@1.0.0-rc.1

The only way to make it works is to add a filterOptions attribute:
But it only works with ENTER and TAb, no COMMA, but the code should handle it...
I don't really understand what's going on :/

Have you tried just copying the Creatable demo as a starting point?