React-select: newOptionCreator is called twice for every key pressed?

[willemx]

Created this simple demo to illustrate:
(sorry, I tried to use plunker, but could not import Creatable)

import React from 'react'

import {Creatable} from 'react-select'
import '/node_modules/react-select/dist/react-select.css'

const optionList = [
  {value: 1, label: 'one'},
  {value: 2, label: 'two'},
  {value: 3, label: 'three'}
];

export const SelectCreate = React.createClass({

  getInitialState () {
    return {
      options: [
        {value: 2, label: 'two'}
      ]
    };
  },

  onChange (options) {
    console.log('onChange', options);
    this.setState({options: options});
  },

  newOption (obj) {
    console.log('newOption', obj);
    return {
      [obj.labelKey]: obj.label,
      [obj.valueKey]: obj.label
    };
  },

  validateOption (obj) {
    return obj && obj.label && obj.label.length > 1;
  },

  render () {
    return (
      <Creatable
        name="select-create"
        multi={true}
        newOptionCreator={this.newOption}
        isValidNewOption={this.validateOption}
        value={this.state.options}
        options={optionList}
        onChange={this.onChange}
        clearable={true}
      />
    )
  }
});

When typing 'qwerty' in the select input field, the console output looks like this:

newOption Object {label: "qw", labelKey: "label", valueKey: "value"}
newOption Object {label: "Create option "qw"", labelKey: "label", valueKey: "value"}
newOption Object {label: "qwe", labelKey: "label", valueKey: "value"}
newOption Object {label: "Create option "qwe"", labelKey: "label", valueKey: "value"}
newOption Object {label: "qwer", labelKey: "label", valueKey: "value"}
newOption Object {label: "Create option "qwer"", labelKey: "label", valueKey: "value"}
newOption Object {label: "qwert", labelKey: "label", valueKey: "value"}
newOption Object {label: "Create option "qwert"", labelKey: "label", valueKey: "value"}
newOption Object {label: "qwerty", labelKey: "label", valueKey: "value"}
newOption Object {label: "Create option "qwerty"", labelKey: "label", valueKey: "value"}

(It does work BTW; if I press TAB, the new option 'qwerty' is added to the options.)

[willcosgrove]

I've got the same issue with my project. In addition, it takes two enter presses, or tab presses, or clicks on the option to get the option selected.

[russpowers]

I just ran into this problem, it takes two enter presses to add the new item. Did you figure out a solution?

[TylerWardle]

I'm running into this issue as well, having to register two key presses to create an item. using the 1.0.0-rc.2 build. Any ideas @JedWatson ?

[russpowers]

FYI, I worked around this by using the onInputChange prop on Select and just modifying the options myself when the input text changes.

[TylerWardle]

I discovered also that if you manually set the shouldKeyDownEventCreateNewOption={(keyCode) => keyCode === 13} prop on Creatable to handle enter (even though it should be set by default) the two press bug disappears.

[jsnmoon]

@TylerWardle Thanks for the suggestion! Your fix worked perfectly on my end.

[JedWatson]

There are two issues being discussed here; the multiple clicks one (which I am still trying to replicate) is not the originally reported one.

newOptionCreator is indeed called twice for each key press; the first is to create an option that may be the same as an already-created one (see the comments in Creatable.js - a selected option for a multi select field would be filtered out of the options array) and the second time is to create the menu item you can select with the promptTextCreator(inputValue) as the label.

I don't think this is actually a problem, it just looks odd when you log it out in the console like that.

I'll follow up the multiple-clicks-required issue separately, in PR #1471