After adding new options with [createFromSearch] with value option props - value on SimpleSelect does no cleared

[mdekalka]

Do you want to request a feature or report a bug? Bug What is the current behavior? Create a SimpleSelect component with default value option and createFromSearch option. When you try to add new option from createFromSearch callback via clicking on new option item - value show the newly added option and the duplicating value. Note: when you add new option item via Enter key - all works fine, no duplicating value.

class TestSelect extends Component {
  state = {
    options: ["apple", "mango", "grapes", "melon", "strawberry"].map(fruit => ({ label: fruit, value: fruit })),
    value: null
  }

  render() {
    return (
      <div>
        <SimpleSelect
          options={this.state.options}
          placeholder="Select from dropdown or Add new"
          theme="bootstrap3"
          className="rs-dropdown"
          createFromSearch={(options, search) => {
            const mapped = options.map(option => option.label).indexOf(search) > -1
            if (search.length == 0 || mapped) {
              return null;
            } else {
              return { label: search, value: search };
            }
          }}
          value={this.state.value}
          hideResetButton
          onValueChange={item => {
            if (!!item && !!item.newOption) {
              this.setState(prevState => {
                return {
                  options: [{ label: item.label, value: item.value }, ...prevState.options],
                  value: { label: item.value, value: item.value }
                }
              })
            }

            this.setState({
              value: { label: item.value, value: item.value }
            })
          }}>
        </SimpleSelect>
      </div>
    )
  }
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem: Select SimpleSelect component and type something to add new option, then click Add <%something%> via mouse. Demo issue: https://codesandbox.io/s/z244om8rqm Gif:

What is the expected behavior? After clicking on Add <%something%> option - input should show value w/o duplicate. Note: Adding new item via Enter key works fine. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React v15.4.2/16.0.0 Chrome 63.0.3239.84 Win10

[ArthurBugan]

I'm having this problem too! Up!

[nsf]

Hey guys, to fix the problem add this property to SimpleSelect:

uid={item => item.value}

I honestly can't read livescript well, so I don't know how exactly react-selectize uses "uid" and why it causes this behaviour. But it fixes the problem.

Documentation says that this should be the default uid, but it's not true. Default uid is "id" function from prelude-ls, which returns the object passed in itself, which is the "item".

To speculate about this, I believe when you submit a new item via "createFromSearch" feature it has "newOption" additional property, which you remove from the item within onValueChange function. Then because of what I described above with "uid", deep equality somewhere fails and causes this buggy behaviour. Making it explicit that uid of an item is just its value fixes the problem.